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

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);
});