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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

默认情况下，您只需要隐藏#jerkBox。在元素的CSS样式中，将其设置为display: none或立即在脚本中的文档准备中隐藏它。

/* CSS */
#jerkBox {
  display: none;
}

或

/* JavaScript */
$(document).ready(function() {
  $('#jerkBox').hide();
}

用户向下滚动并再次备份时应出现Div，但不会在加载时出现

2 个答案: