Question

当用户滚动页面时，是否可以使此下行链接淡入淡出？我猜这可以用jQuery完成，但我对此并不十分熟悉。

HTML

<div class="down-link"><a class="w-downlink" href="#about"><i class="fa fa-chevron-down"></i></a></div>

CSS

.w-downlink {
background-size: 100%;
display: block;
margin-left:auto;
margin-right:auto;
text-align: center;
font-size: 14px;
float:right;
margin-right:30px;
font-weight:bolder;
line-height: 50px;
height: 30px;
padding-top:15px;
color:#FFF;
width:50px;
opacity:0.7; transition: opacity 200ms ease-in;
 background-color: #333;
background-color: rgba(0, 0, 0, 0.3);}

.w-downlink.active {
opacity: 0.7;
}

.w-downlink:hover {
opacity: 1;
}

.down-link {
float: none;
height: 50px;
width: 100%;
margin-top: 170px;
}

使用J QUERY CODE

 $(window).scroll(function () {
 if ($(this).scrollTop() > 0) {
   $('.down-link').fadeOut(250);
 } else {
   $('.down-link').fadeIn(0);
 }
 });

Answer 1

试试这个

$(window).scroll(function() {
$('.down-link').fadeTo("slow" , 0); 
});

如果你想要它，当你回来时，请改用

$(function(){
    var lastScrollTop = 0, delta = 5;
    $(window).scroll(function() {
        var nowScrollTop = $(this).scrollTop();
        if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
            if (nowScrollTop > lastScrollTop){
                $('.down-link').fadeTo('slow',0); // scrolling down
            } else {
                $('.down-link').fadeTo('slow',1); // scrolling up
            }
            lastScrollTop = nowScrollTop;
        }
    });
});

当用户开始滚动页面时，链接隐藏

1 个答案: