javascript - 当用户向下滚动并再次返回时应该出现 Div，但不会在加载时出现

Question

我是 javascript 的新手，所以这对你来说可能真的很容易。我的网站 ( http://www.pjsmusic.com ) 需要一个 200px 的 div，当用户向下滚动页面 40px 时出现。我添加了一些 javascript

$(document).scroll(function() {
    $('#jerkBox').toggle($(this).scrollTop()> 40);
});

但是，即使页面根本没有从顶部滚动，页面加载时也会出现 div。当用户滚动 40px 时如何让这个 div 出现，当他们向上滚动页面超过 40px 时消失，但在加载时不出现？如果您访问该链接，您就会明白我的意思。提前致谢!

Answer 1

JQuery .toggle() 控制元素的 display 属性。您可以从一开始就在 css 上将其设置为 display: none:

#jerkBox {
    display: none;
}

$(document).scroll(function() {
    $('#jerkBox').toggle($(this).scrollTop()> 40);
});

#jerkBox {
    float: right;
    width: 200px;
    height: 200px;
    background: red;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="jerkBox">
    jerkBox div
</div>
<div style="height: 2000px">
    
</div>