I have made great improvements in the original Local Dog Shopping Network-Web Location Navigation:
Specific improvements include the following:
1. The original Ground Dog Shopping Network realized click navigation jump through anchor links. This jump is instantaneous without animation. I encapsulated menuClick(menus,items) click navigation function and scroll to (targetTop) scroll bar scroll function to achieve click navigation and then scroll bar to the corresponding content position, which scrolled over. Cheng is animated by setting the timer.
2. In terms of the interaction between the scrollbar value and navigation style, or the original writing method, by judging that the scrollbar value can exceed offsetTop-150 of the number of items, then record the id of the last item and match the corresponding navigation, add highlight style to the corresponding navigation, not corresponding empty style.
3. In many cases, the navigation start does not necessarily need to be at the top, it may start at the bottom (with absolute), then when the user browses to the content area, the navigation is fixed, and then browses to the end of the content area, it needs to cancel the fixed, become absolute positioning.
The px calculation of this process is based on this formula:
The distance between page elements and the top of the browser's viewing area= Element offset from the top of the document - height of web pages rolled up
The distance between page elements and the top of the browser's visual area = DOM element object. offsetTop - document.documentElement.scrollTop
4. We change the value of the scroll bar by clicking on the navigation, and the navigation style by clicking on the value of the scroll bar, so the style will change after clicking on the navigation.
Specific analysis: After clicking on navigation, the scrollbar value is offsetTop-100, and when the scrollbar value is > offsetTop-150, the corresponding navigation style will be changed. offsetTop-100 > offsetTop-150, so the navigation will be highlighted after clicking on navigation.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Grounddog Shopping Network-Navigation effect of web page positioning</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
line-height: 1.7;
}
li {
list-style: none;
}
#content {
width: 800px;
margin: 0 auto;
padding: 20px;
}
#content h1 {
color: #0088bb;
}
#content .item {
padding: 20px;
margin-bottom: 20px;
border: 1px dotted #0088bb;
transition: all .3s ease-in-out;
}
#content .item h2 {
font-size: 16px;
font-weight: bold;
border-bottom: 2px solid #0088bb;
margin-bottom: 10px;
}
#content .item li {
display: inline;
margin-right: 10px;
}
#content .item li a img {
width: 230px;
height: 230px;
border: none;
}
#menu {
position: absolute;
top: 715px;
left: 50%;
margin-left: 420px;
width: 50px;
}
#menu ul li a {
display: block;
margin: 5px 0;
font-size: 14px;
font-weight: bold;
color: #333;
width: 80px;
height: 50px;
line-height: 50px;
text-decoration: none;
text-align: center;
transition: all .3s ease-in-out;
}
#menu ul li a:hover,
#menu ul li a.current {
color: #fff;
background: #0088bb;
}
h1 {
margin-bottom: 100px;
}
/* /* /* /*
* html,
* html body {
background-image: url(about:blank);
background-attachment: fixed;
}
* html #menu {
position: absolute;
bottom: auto;
top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}*/
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="javascript:;" class="current" id="nav-item1">1F Men's wear</a>
</li>
<li>
<a href="javascript:;" id="nav-item2">2F Women's wear</a>
</li>
<li>
<a href="javascript:;" id="nav-item3">3F Beauty makeup</a>
</li>
<li>
<a href="javascript:;" id="nav-item4">4F Digital</a>
</li>
<li>
<a href="javascript:;" id="nav-item5">5F Mother and infant</a>
</li>
</ul>
</div>
<div id="content">
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<div id="item1" class="item">
<h2>1F Men's wear</h2>
<ul>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="1F.jpg" alt="" /></a>
</li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F Women's wear</h2>
<ul>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="2F.jpg" alt="" /></a>
</li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F Beauty makeup</h2>
<ul>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="3F.jpg" alt="" /></a>
</li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F Digital</h2>
<ul>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
<li>
<a href="#"><img src="4F.png" alt="" /></a>
</li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F Mother and infant</h2>
<ul>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="5F.jpg" alt="" /></a>
</li>
</ul>
</div>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
<h1>Grounddog Shopping Network</h1>
</div>
<script type="text/javascript">
window.onload = function() {
var menus = document.getElementById("menu").getElementsByTagName('a');
var items = getElementsByClassName(document.getElementById("content"), 'item');
menuClick(menus, items);
}
window.onscroll = function() {
var menus = document.getElementById("menu").getElementsByTagName('a'); //Navigation Link Array
var items = getElementsByClassName(document.getElementById("content"), 'item'); //Content Array
activeMenus(menus, items); //Navigation highlighting and content scrolling
fixTo();
}
//Click on the navigation function
function menuClick(menus, items) {
for(var i = 0; i < menus.length; i++) { //Traversal navigation
menus[i].index = i;
menus[i].onclick = function() {
//Get offsetTop-100 of the content corresponding to the point navigation as the target value of the scrollbar
var targetTop = items[this.index].offsetTop - 100;
scrollTo(targetTop);
}
}
}
//Scrollbar rolling function
function scrollTo(targetTop) { //Recursive call timer
timer = setTimeout(function() { //Only one timer
console.log('The target position is:' + targetTop);
var top = document.documentElement.scrollTop || document.body.scrollTop; //Current scrollbar values
console.log('At this point, my scrollbar position:' + top);
console.log('1 The current distance difference is:' + (targetTop - top));
var ispeed = (targetTop - top) / 3;
console.log('2 The velocity corresponding to this distance difference:' + ispeed);
if(Math.abs(ispeed) >= 1) {
document.documentElement.scrollTop = document.body.scrollTop = top + ispeed;
clearTimeout(timer); //As long as the scrollbar is rolling, it will always perform the clear operation to prevent another timer from opening.
scrollTo(targetTop); //The timer above has been cleared and the scrollTo function is called again
} else {
clearTimeout(timer); //Clear timer when ispeed is less than 1
}
}, 30)
// document.documentElement.scrollTop = document.body.scrollTop = items[this.index].offsetTop - 100;
}
//Navigation highlighting and content scrolling
function activeMenus(menus, items) {
var top = document.documentElement.scrollTop || document.body.scrollTop; //Distance of scroll bar from top
var currentId = "";
for(var i = 0; i < items.length; i++) {
var _itemTop = items[i].offsetTop; //Content offsetTop
if(top >= _itemTop - 150) {
currentId = items[i].id; //id matching from scrollbar height to target content
} else {
break;
}
}
if(currentId) { //item3,item4, etc.
for(var j = 0; j < menus.length; j++) { //Search for currentId with the same index in the navigation array
if(menus[j].id != 'nav-' + currentId) { //The target content id differs from the navigation id by a'nav-'
menus[j].className = "";
} else {
menus[j].className = "current";
}
}
}
}
//Getting elements from className
function getElementsByClassName(node, classname) {
if(node.getElementsByClassName) {
//Use existing methods
return node.getElementsByClassName(classname);
} else {
var result = new Array(); //Declare an array of elements with the same class name
var elems = node.getElementsByTagName('*');
for(var i = 0; i < elems.length; i++) {
if(elems[i].className.indexOf(classname) != -1) {
result[result.length] = elems[i];
}
}
return results;
}
}
//Location and navigation
function fixTo() {
var top = document.documentElement.scrollTop || document.body.scrollTop; //Distance of scroll bar from top
var menu = document.getElementById('menu');
if(top < 618) {
menu.style.position = 'absolute';
menu.style.top = '715px';
} else if(top >= 618 && top <= 4374) { //When the scroll bar is greater than 618, the offsetTop-100 of the first item, fix it
menu.style.position = 'fixed';
menu.style.top = '97px'; //715 is the absolute location top of menu, 715-618 = 97
} else if(top > 4374) { //lower limit
menu.style.position = 'absolute';
menu.style.top = '4471px'; //97+4374=4471
}
}
// The distance between page elements and the top of the browser's viewing area is 97 = the offset value 715 between the elements and the top of the document - the height of the web page rolled up is 618
// The distance between page elements and the top of the browser's visual area = DOM element object. offsetTop - document. documentElement. scrollTop
</script>
</body>
</html>