内容在页面中位置导航
Posted Sunny_Lee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了内容在页面中位置导航相关的知识，希望对你有一定的参考价值。
html:
<body> <div id="j_subject"> <!-- 头部/上一部分 --> <div class="nav">nav</div> <!-- 头部/上一部分结束 --> <!-- 版块 --> <div class="box1 cont-box">第一部分</div> <div class="box2 cont-box">第二部分</div> <div class="box3 cont-box">第三部分</div> <div class="box4 cont-box">第四部分</div> <div class="box5 cont-box">第五部分</div> <!-- 板块结束 --> <!-- 结尾/下一部分 --> <div class="box6">结尾</div> <!-- 结尾结束/下一部分结束 --> <!-- 位置定位导航开始 --> <div class="j_nav" id="j_nav"> <ul> <li class="nav-list"><p class="p1">第一部分按钮</p></li> <li class="nav-list"><p class="p1">第二部分按钮</p></li> <li class="nav-list"><p class="p1">第三部分按钮</p></li> <li class="nav-list"><p class="p1">第四部分按钮</p></li> <li class="nav-list"><p class="p1">第五部分按钮</p></li> <li class="li-ju back clearfix"> <div class="arrow fl songti"> <em>▲</em> <i>▲</i> </div> <p class="p1 fl">TOP</p> </li> </ul> </div> <!-- 位置定位导航结束 --> </div> </body>
css:
.nav{background: blue;height: 500px;width: 100%;font-size: 24px;padding-left: 200px;} .box1{height: 500px;padding-left: 200px;background: #fff;font-size: 24px;} .box2{height: 500px;padding-left: 200px;background: pink;font-size: 24px;} .box3{height: 500px;padding-left: 200px;background: red;font-size: 24px;} .box4{height: 500px;padding-left: 200px;background: #fff;font-size: 24px;} .box5{height: 500px;padding-left: 200px;background: green;font-size: 24px;} .box6{height: 500px;padding-left: 200px;background: black;font-size: 24px;} .j_nav{width: 130px;height: 245px;border-radius: 10px;border:1px solid #fff;background: #fff;position: absolute;right: 20px;top: 350px;box-shadow: 3px 2px 2px rgba(0,126,196,0.75);} .j_nav li{height: 40px;line-height: 40px;text-align: center;cursor:pointer;} .j_nav li .p1 {display: inline-block;width: 100%;color: #007ed4;font-size: 18px;} .j_nav li .p1:hover{color: #ff1975;} .j_nav .on .p1 {color: #ff1975;} .j_nav .li-ju{background-image: none;} .j_nav .li-ju:hover em{color:#ff1975;} .j_nav .li-ju:hover i{color:#fff;} .nav-on {position: fixed;right: 20px;top:11%;} .j_nav .arrow {font-size: 16px;margin-left: 35px;width: 16px;margin-right: 5px;} .j_nav .arrow em{color:#007ed4;} .j_nav .arrow i{color:#fff;position: relative;top: -36px;} .j_nav .back .p1 {width: 20px;}
js：
$(function(){ var subject =$(‘#j_subject‘); var navigation = $(‘#j_nav‘); //导航 var nav = subject.find(‘.nav-list‘); //所有按钮 var conBox = subject.find(‘.cont-box‘); //模块 var navTop = navigation.offset().top; //导航相对于浏览器视口到高度 var sw = screen.width; // 显示屏幕宽度 nav.on(‘click‘,function(){ var t = $(this); var ts = t.siblings(‘li‘); t.addClass(‘on‘); ts.removeClass(‘on‘); var tindex = t.index(); var section = conBox.eq(tindex); var stop = section.offset().top; $(‘body,html‘).animate({scrollTop:stop},800); }); $(‘.back‘).on(‘click‘,function(){ $(‘body,html‘).animate({scrollTop:0},800); }); $(window).scroll(function () { var w = $(window).scrollTop(); //滚动条的垂直偏移 if (_util.check.isIE6) { return; }; if (w >= 300) { navigationion.addClass(‘nav-on‘); } else { navigation.removeClass(‘nav-on‘); } $(‘.cont-box‘).each(function(a,b) { var ctop = $(this).offset().top; if (w>ctop-20) { navigation.find(‘li‘).removeClass(‘on‘); navigation.find(‘li‘).eq(a).addClass(‘on‘); } }); }).trigger("scroll"); });
以上是关于内容在页面中位置导航的主要内容，如果未能解决你的问题，请参考以下文章