Shulou(Shulou.com)06/03 Report--

This article will explain in detail how JavaScript makes floor navigation effects. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

1. Function realization 1.1 structural layer column one column two columns three columns four columns five columns one column two columns three columns four columns five 1.2 style layer * {margin: 0; padding: 0;} body .box {width: 1200px } body .box {margin: 0 auto;} ul {list-style: none;} body .box ul li {height: 800px; background-color: silver; margin-bottom: 20px; font-size: 30px; font-weight: bold;} body .left {position: fixed; left: 20px; bottom: 100px Width: 100px; height: 250px; top: 50%; margin-top:-125px; background-color: silver;} body .left ul li {height: 50px; line-height: 50px; text-align: center; cursor: pointer;} body .current {color: # fff; background-color: tomato } 1.3 behavior floor 1.3.1 floor Jump

Click the floor button in the left menu to jump to the appropriate floor.

Var oList = document.getElementById ('left-list'); / / Click event delegate oList.onclick = function (e) {if (e.target.tagName.toLowerCase () = =' li') {/ / take data-n value var n = e.target.getAttribute ('data-n'); / / [] attribute selector var contentPart = document.querySelector (' .content-part [data-n=' + n +']') / / set scrolling document.documentElement.scrollTop = contentPart.offsetTop;}} 1.3.2 floor monitoring

Floor monitoring, when the page scrolls, the background of the floor column in the left menu changes.

/ / when the page scrolls, the background of the left box column changes var contents = document.querySelectorAll ('.content-part'); var lis = document.querySelectorAll (' # left-list li'); var offsetTopArr = []; for (var I = 0; I)

< contents.length; i++) { offsetTopArr.push(contents[i].offsetTop);}// 为了方便比较，追加无穷大offsetTopArr.push(Infinity);// 监听卷动var nowFloor = -1;_window.onscroll = function (e) { var nowScrollTop = document.documentElement.scrollTop; // break的i值即为盒子数组下标 for (var i = 0; i < offsetTopArr.length; i++) { if (nowScrollTop >

= offsetTopArr [I] & & nowScrollTop < offsetTopArr [I + 1]) {break;}} / / different floors, change the style if (nowFloor! = I) {nowFloor = I; for (var j = 0; j < lis.length) If (j = = I) {/ / add styles to the current floor lis.className = 'current';} else {/ / remove styles from other floors [j] .className =';} 2. Effect preview

This is the end of the article on "how to make floor navigation effects in JavaScript". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.