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");
});
时间： 2024-10-13 12:00:46