写了一个页面菜单滚动监听的案例
样式部分:
/*右侧悬浮按钮*/
.brand-rightNav {
position: fixed;
right: 20px;
top: -300px;
z-index: 99;
font-family: "微软雅黑";
}
.brand-rightNav li{
width: 220px;
height: 60px;
line-height: 60px;
margin-bottom: 10px;
border:1px solid #d6d6d6;
border-radius: 4px;
text-align: center;
color: #555;
font-size: 18px;
cursor: pointer;
transition: all .3s;
background: #fff;
}
.brand-rightNav li.active,
.brand-rightNav li:hover{
border:1px solid #005dba;
color: #fff;
background: #005dba;
}
html部分:
<ul class="brand-rightNav">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
js部分:
< script >
$(function() {
var rNav = $('.brand-rightNav')
var rNavLi = $('.brand-rightNav li')
$(window).scroll(function() {
if($(window).scrollTop() > 600) {
rNav.css({
'position': 'fixed',
'top': 100
}).addClass('animated bounceInRight')
} else {
rNav.css({
'position': '',
'top': ''
})
}
if($(window).scrollTop() < 2515) {
rNavLi.eq(0).addClass('active').siblings().removeClass('active');;
}
if($(window).scrollTop() > 2516 && $(window).scrollTop() < 3900) {
rNavLi.eq(1).addClass('active').siblings().removeClass('active');;
}
if($(window).scrollTop() > 3901 && $(window).scrollTop() < 6600) {
rNavLi.eq(2).addClass('active').siblings().removeClass('active');;
}
if($(window).scrollTop() > 6601) {
rNavLi.eq(3).addClass('active').siblings().removeClass('active');;
}
});
rNavLi.eq(0).click(function() {
$(this).addClass('active').siblings().removeClass('active');
var _i = $(this).index();
$('body, html').animate({
scrollTop: 700
}, 300);
});
rNavLi.eq(1).click(function() {
$(this).addClass('active').siblings().removeClass('active');
var _i = $(this).index();
$('body, html').animate({
scrollTop: 2517
}, 300);
});
rNavLi.eq(2).click(function() {
$(this).addClass('active').siblings().removeClass('active');
var _i = $(this).index();
$('body, html').animate({
scrollTop: 3902
}, 300);
});
rNavLi.eq(3).click(function() {
$(this).addClass('active').siblings().removeClass('active');
var _i = $(this).index();
$('body, html').animate({
scrollTop: 6602
}, 300);
});
})
</script>