请问我这样做的一个楼梯式导航有这种问题怎么解决啊 会重复执行添加隐藏样
那个我应该是点击的时候添加样式其他兄弟元素隐藏各自的背景样式转跳到他的那个锚点那 然而好像因为我下面的$(window).scroll(function ()函数用来控制滚动条显示隐藏样式给重复执行了 只要点击其他附近的锚点时候 先是隐藏其他兄弟的样式，然后因为滚动条控制兄弟元素的背景再度会显示一遍再隐藏请问我该怎么改啊 我知道我做的很渣没办法每个锚点背景图不同只能用这种死办法QWQ
#menu{
width:32px;height:360px;
position:fixed;
top:35%;left:50px;
z-index: 3;
list-style: none;
display: none;
}
#menu li{
text-align: center;
margin: 30px auto;
cursor: pointer;
background: url(img/dod.png);
background-size: cover;
width: 10px;
height: 10px;
}
#menu .message{
background: url(img/xinxi.png);
background-size: cover;
transform: scale(0);
animation: scales 1s forwards;
}
#menu .jishus{
background: url(img/jineng.png);
background-size: cover;
transform: scale(0);
animation: scales 1s forwards;
}
#menu .licheng{
background: url(img/jinli.png);
background-size: cover;
transform: scale(0);
animation: scales 1s forwards;
}
#menu .sakuhin{
background: url(img/zuoping.png);
background-size: cover;
transform: scale(0);
animation: scales 1s forwards;
}
#menu .top{
background: url(img/top.png);
background-size: cover;
transform: scale(0);
animation: scales 1s forwards;
}
@keyframes scales{
from{
transform: scale(0);
}
to{
transform: scale(3);
}
}
function louti(){
var _index=0;
$("#menu ul li:eq(0)").click(function(){
$(this).addClass('message');
$("#menu ul li:eq(1)").removeClass('jishus');
$("#menu ul li:eq(2)").removeClass('licheng');
$("#menu ul li:eq(3)").removeClass('sakuhin');
//通过拼接字符串获取元素，再取得相对于文档的高度
var _top=$("#louti1").offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
$("#menu ul li:eq(1)").click(function(){
$(this).addClass('jishus');
$("#menu ul li:eq(0)").removeClass('message');
$("#menu ul li:eq(2)").removeClass('licheng');
$("#menu ul li:eq(3)").removeClass('sakuhin');
//通过拼接字符串获取元素，再取得相对于文档的高度
var _top=$("#louti2").offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
$("#menu ul li:eq(2)").click(function(){
$(this).addClass('licheng');
$("#menu ul li:eq(1)").removeClass('jishus');
$("#menu ul li:eq(0)").removeClass('message');
$("#menu ul li:eq(3)").removeClass('sakuhin');
//通过拼接字符串获取元素，再取得相对于文档的高度
var _top=$("#louti3").offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
$("#menu ul li:eq(3)").click(function(){
$(this).addClass('sakuhin');
$("#menu ul li:eq(1)").removeClass('jishus');
$("#menu ul li:eq(2)").removeClass('licheng');
$("#menu ul li:eq(0)").removeClass('message');
//通过拼接字符串获取元素，再取得相对于文档的高度
var _top=$("#louti4").offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
$("#menu ul li:eq(4)").click(function(){
$("#menu ul li:eq(0)").removeClass('message');
$("#menu ul li:eq(1)").removeClass('jishus');
$("#menu ul li:eq(2)").removeClass('licheng');
$("#menu ul li:eq(3)").removeClass('sakuhin');
var _top=$("#louti5").offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
$(".down").click(function(){
var _top=$("#louti1").offset().top;
//scrollTop滚动到对应高度
$("body,html").animate({scrollTop:_top},500);
});
$(window).scroll(function () {
if ($(window).scrollTop() > 800 ) {
$("#menu").fadeIn();
}
else {
$("#menu").fadeOut();
}
if ($(window).scrollTop() > 940 && $(window).scrollTop() < 2000) {
$("#menu ul li:eq(0)").addClass('message');
}
else {
$("#menu ul li:eq(0)").removeClass('message');
}
if ($(window).scrollTop() > 2000 && $(window).scrollTop() < 3000) {
$("#menu ul li:eq(1)").addClass('jishus');
}
else {
$("#menu ul li:eq(1)").removeClass('jishus');
}
if ($(window).scrollTop() > 3000 && $(window).scrollTop() < 4000) {
$("#menu ul li:eq(2)").addClass('licheng');
}
else {
$("#menu ul li:eq(2)").removeClass('licheng');
}
if ($(window).scrollTop() > 4000 && $(window).scrollTop() < 5000) {
$("#menu ul li:eq(3)").addClass('sakuhin');
}
else {
$("#menu ul li:eq(3)").removeClass('sakuhin');
}
})
}
louti(); |
免责声明：本内容仅代表回答会员见解不代表天盟观点，请谨慎对待。
版权声明：作者保留权利，不代表天盟立场。
|
|
|
|
|
|
|
|
天盟APP下载
