首页 > 代码库 > 内容在页面中位置导航
内容在页面中位置导航
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");});
内容在页面中位置导航
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。