Question

我有以下页面http://jsfiddle.net/Leytgm3L/20/，这个白色方块将来会是下面区域的链接 - 当用户开始向下滚动时我怎么能这样做，这个图标就会消失？到目前为止，此箭头的CSS看起来像这样：

.next-section {
    width:60px;
    height:60px;
    background-color:white;
    background-image:url(../img/next_section.png); 
    background-size: 34px 18px; 
    background-repeat:no-repeat; 
    background-position:13px 21px;
    position:absolute;
    bottom:0px;
    left:50%;
    margin-left:-30px;
    opacity:0.9;
}

我只是不确定我是否只能在CSS中使用它，或者我应该在这里使用一些jquery（也 - 我不知道如何在这里做）... 感谢

Answer 1

只是一点jQuery

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {// can be whatever, 0 refers to the top space you allow
        $('.move').hide();// Hide your element
    }
    else {
        $('.move').show();// It's just if you want to show back the element if we're back on top
    }
});

注意我，根据你的小提琴掩盖了链接（.move）而不仅仅是内部div。

希望它会帮助你

如果您想要回顾，请记下Juan C的评论并使用他的代码：

$(window).scroll(function(){
    $(".move").toggle($(this).scrollTop() === 0);
});

Answer 2

我认为它可以解决你想要的问题

setInterval(function(){
var scrl =    parseInt($("body").scrollTop());
var hei = parseInt($("#fadeAway").height());
var tt = (hei * scrl) / 100;
   if(tt <= 100){
        tt = parseInt(tt / 10);
        tt = parseFloat("0."+tt);
        var tt2 = parseFloat(1.0 - tt);
        $("#fadeAway").css({"opacity":tt2});
   }
},100);

你可以看到它正常工作here

当我开始滚动页面时，如何让我的图像（向下箭头）消失？

2 个答案: