0
我有这个固定的锚链接菜单组成,它有滚动时的视觉变化。我怎样才能通过点击锚点并不仅仅通过滚动页面来进行更改?当我避免滚动并直接使用锚链接时,视觉效果不会改变。希望你们能帮助我。制作滚动效果以及点击以及
HTML
<div id="pointer">
<a href="#first"><span class="one"></span></a>
<a href="#second"><span class="two"></span></a>
<a href="#third"><span class="three"></span></a>
<a href="#fourth"><span class="four"></span></a>
<a href="#areaTest"><span class="five"></span></a>
</div>
CSS
body{background-color: #003333;}
#pointer{
position: fixed;
top: 50%;
left: 50px;
}
#pointer span{
display: block;
height: 13px;
width: 25px;
border-top-color: #999999;
border-top-style: solid;
border-top-width: 1px;
}
JS
$(function() {
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
var windowScrollTop = $(this).scrollTop();
if (delta > 0) {
//scroll-down
if(windowScrollTop > 0){
$(".one").css("border-top-color","#fff").animate({width: '50px'}, 100);
}
if(windowScrollTop > 350){
$(".two").css("border-top-color","#fff").animate({width: '50px'}, 100);
}
if(windowScrollTop > 750){
$(".three").css("border-top-color","#fff").animate({width: '50px'}, 100);
}
if(windowScrollTop > 1150){
$(".four").css("border-top-color","#fff").animate({width: '50px'}, 100);
}
if(windowScrollTop > 1500){
$(".one, .two, .three, .four, .five").css("border-top-color","#999999");
$(".five").animate({width: '50px'}, 100);
$("body").css('background-color', '#fff');
}
}
else {
//scroll-up
if(windowScrollTop < 350){
$(".two").css("border-top-color","#999999").animate({width: '25px'}, 100);
}
if(windowScrollTop < 750){
$(".three").css("border-top-color","#999999").animate({width: '25px'}, 100);
}
if(windowScrollTop < 1150){
$(".four").css("border-top-color","#999999").animate({width: '25px'}, 100);
}
if(windowScrollTop < 1500){
$(".one, .two, .three, .four, .five").css("border-top-color","#fff");
$(".five").animate({width: '25px'}, 100);
$("body").css('background-color', '#003333');
}
}
});
});
谢谢@Andrea!它工作真棒!如果可能的话,我只想问一件事。有没有办法让用户点击锚链接时滚动更顺畅? –
我可以通过$(“body”)使滚动更平滑。animate({scrollTop:$('#'+ targetId).offset()。top-200},“slow”);但现在它不会在滚动时将bgColor更改回灰色 –