Native js realizes the side navigation effect of e commerce
- 2021-07-12 05:12:50
- OfStack
Key points of knowledge
Implementation principle:
1. Click on the floor to jump to the corresponding floor, using anchor point positioning
Elevator: < a href="#item2" > 2F Gujiaqing < /a > < /li >
List title: < div class="floor-title" id="item2" > < /div >
There's nothing to say about this
2. When you click a floor to jump to the corresponding floor, the floor is highlighted
Our script is mainly to realize this function.
Principle to obtain the browser navigation bar pull-down distance and each floor relative to the top of the document pull-down distance check.
The method events needed here are:
window.onscroll=function(){ } // Browser scrolls to listen for event execution function
.scrollTop // Get the height of scroll bar drop-down, you can use console.log(top) Try 1 I'll see next
.offsetTop // Gets the distance between the element and the top of the document
General process analysis
First, get the height of scroll bar drop-down and store 1 variables that will be used
// Gets the height of the scroll bar drop-down
var top=document.documentElement.scrollTop||document.body.scrollTop;
//console.log(top)
// All floors
var items=document.getElementById("wrap").getElementsByClassName("floor-title");
//a Label parent
var elev=document.getElementById("elev");Traverse all floors to get the distance from the top of the document for each floor, assign ID to thisID for the floor if the height of the scroll bar is greater than the height of the floor,
Each floor is compared once until the conditions are not met and the loop is exited.
// Object that stores the current floor under an empty variable ID
var thisID="";
// Traverse all floors
for(var i=0;i<items.length;i++){
// Gets the distance from each floor to the top of the document
var itemTop=items[i].offsetTop;
//console.log(itemTop)
// If the height of the scroll bar is greater than the height of the floor, the ID Assign thisID
// Each floor compares 1 Number of times until the condition is not met to exit the loop
if(top>itemTop-100){// Subtract 100 It is for the user experience, and you will understand it after testing it yourself
thisID=items[i].id;
}else{
break;
}
}Finally, add highlighting styles to the current floor and delete other styles.
Because the native js is used, there is no powerful selector of jquery, so it is necessary to use a loop traversal to obtain href whose value is ID of the current floor.
Note here that in js. href is a complete link, so we need to split it into an array with split () method, and the last bit of the array is ID
// All a Label
var alinks=elev.getElementsByTagName("a");
if(thisID){
for(var j=0;j<alinks.length;j++){
// Because what you get is 1 A complete link, so we have to cut it in half
var _href=alinks[j].href.split("#");
// At the end of the array 1 Bit and the current height floor id Carry out verification
if(_href[_href.length-1]!=thisID){
alinks[j].className="";
}else{
addClass(alinks[j],"current")
}
}
}Complete code
Note: Replace the picture link by yourself, and copy more product lists to make the browser full enough
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
body{background: #9B1BC5;}
@font-face {
font-family: 'iconfont'; /* project id 196174 */
src: url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.eot');
src: url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.woff') format('woff'),
url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_9dwvwg9edp0q9f6r.svg#iconfont') format('svg');
}
.cart{
font-family:"iconfont" !important;
font-size:36px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
color: #dd2727;
height: 36px;
width: 36px;
padding: 0;
line-height: 1;
position: absolute;
right: 0;
bottom: 0;
}
.floor-title{width: 990px; margin: 0 auto; overflow: hidden;}
.floor-text{width:990px; height: 80px; margin: 10px auto 0; font-size: 100%;}
.content{width: 990px; margin: 0 auto; overflow: hidden;}
.list0{font-size: 0; margin: 0 -10px -10px 0;}
.item{display: inline-block; vertical-align: top; width: 190px; margin:0 10px 10px 0; background: #fff; position: relative; line-height: 1.2;}
.item a{display: block;}
.item-main{padding: 9px; position: relative;}
.item-title{font: 14px/1.3 tahoma,arial,"\5b8b\4f53"; color: #313D44; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow: hidden; margin-bottom: 3px;}
.item-desc{font: 12px/1.2 tahoma,arial,"\5b8b\4f53"; color: #dd2727; margin-bottom: 5px;}
.item-imp{font: 12px/1.2 tahoma,arial,"\5b8b\4f53"; margin-top: 9px; padding-right: 35px; position: relative;}
.item-sales{color: #666;}
.promotion-price{font-size: 18px; color: #dd2727; font-weight: 700; font-family: Helvetica; line-height: 1.1; display: inline-block;}
.promotion-price:first-letter {font-size: 14px; font-weight: 400; margin-right: 1px;}
.elevator{position: fixed; left: 50%; margin-left: 505px; bottom: 60px; width: 100px; font: 12px/1.5 "Microsoft Yahei",tahoma,arial;}
.elevator ul{background: #B50100;}
.elevator ul li a{height: 25px; line-height: 25px; color: #fff; display: block; text-align: center;}
.elevator ul li a:hover,
.elevator ul li a.current{background: #800100;}
</style>
</head>
<body>
<div class="elevator" id="elev">
<ul>
<li><a href="#item1" class="current">1F Snack food </a></li>
<li><a href="#item2">2F Guhujiaqing </a></li>
<li><a href="#item3">3F Grain and oil dry goods </a></li>
<li><a href="#item4">4F Maternal and infant products </a></li>
<li><a href="#item5">5F Imported food </a></li>
<li><a href="#item6">6F Paper products are 100 times a day </a></li>
</ul>
</div>
<div id="wrap">
<div class="floor-title" id="item1"><h3 class="floor-text"><img src="images/1f.png"></h3></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/ Willows fresh lime hydrating moisturizing clean health shower gel 600mlssssssssssss</div>
<div class="item-desc"> Full 188 Minus 100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales"> Monthly sales 25170 Piece </div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"> In fact, in fact, the </i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item2"><h3 class="floor-text"><img src="images/2f.png"></h3></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/ Willows fresh lime hydrating moisturizing clean health shower gel 600mlssssssssssss</div>
<div class="item-desc"> Full 188 Minus 100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales"> Monthly sales 25170 Piece </div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"> In fact, in fact, the </i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item3"><h3 class="floor-text"><img src="images/3f.png"></h3></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/ Willows fresh lime hydrating moisturizing clean health shower gel 600mlssssssssssss</div>
<div class="item-desc"> Full 188 Minus 100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales"> Monthly sales 25170 Piece </div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"> In fact, in fact, the </i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item4"><h3 class="floor-text"><img src="images/4f.png"></h3></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/ Willows fresh lime hydrating moisturizing clean health shower gel 600mlssssssssssss</div>
<div class="item-desc"> Full 188 Minus 100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales"> Monthly sales 25170 Piece </div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"> In fact, in fact, the </i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item5"><h3 class="floor-text"><img src="images/5f.png"></h3></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/ Willows fresh lime hydrating moisturizing clean health shower gel 600mlssssssssssss</div>
<div class="item-desc"> Full 188 Minus 100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales"> Monthly sales 25170 Piece </div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"> In fact, in fact, the </i>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="floor-title" id="item6"><h3 class="floor-text"><img src="images/6f.png"></h3></div>
<div class="content">
<div class="list0">
<div class="item">
<a href="#">
<div class="img-wrap"><img src="images/pic.jpg"></div>
<div class="item-main">
<div class="item-info">
<div class="item-title">Walch/ Willows fresh lime hydrating moisturizing clean health shower gel 600mlssssssssssss</div>
<div class="item-desc"> Full 188 Minus 100</div>
</div>
<div class="item-imp">
<div class="imp-main">
<div class="item-sales"> Monthly sales 25170 Piece </div>
<div class="item-price"><b class="promotion-price">¥29.9</b></div>
</div>
<i class="cart"> In fact, in fact, the </i>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Execute multiple function perfection schemes immediately after the page is loaded.
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !="function"){
window.onload=func;
}
else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addloadEvent(b);
// Execute multiple function perfection schemes immediately after the page loads over .
// Add an element to the original 1 A className
function addClass(element,value){
if(!element.className){
element.className=value;
}
else{
newClassName=element.className;
newClassName+=" ";
newClassName+=value;
element.className=newClassName;
}
}
function b(){
window.onscroll=function(){
// Gets the height of the scroll bar drop-down
var top=document.documentElement.scrollTop||document.body.scrollTop;
//console.log(top)
// All floors
var items=document.getElementById("wrap").getElementsByClassName("floor-title");
//a Label parent
var elev=document.getElementById("elev");
// Object that stores the current floor under an empty variable ID
var thisID="";
// Traverse all floors
for(var i=0;i<items.length;i++){
// Gets the distance from each floor to the top of the document
var itemTop=items[i].offsetTop;
//console.log(itemTop)
// If the height of the scroll bar is greater than the height of the floor, the ID Assign thisID
// Each floor compares 1 Number of times until the condition is not met to exit the loop
if(top>itemTop-100){// Subtract 100 It is for the user experience, and you will understand it after testing it yourself
thisID=items[i].id;
}else{
break;
}
}
// All a Label
var alinks=elev.getElementsByTagName("a");
if(thisID){
for(var j=0;j<alinks.length;j++){
// Because what you get is 1 A complete link, so we have to cut it in half
var _href=alinks[j].href.split("#");
// At the end of the array 1 Bit and the current height floor id Carry out verification
if(_href[_href.length-1]!=thisID){
alinks[j].className="";
}else{
addClass(alinks[j],"current")
}
}
}
}
}
</script>
</body>
</html>