您好,我正在开发一个垂直滚动网站,其中固定的中心图像(主 Angular )根据用户在页面上的位置使用 .scrolltop 隐藏和显示。我遇到的唯一问题是,当页面第一次加载时,每个中央图像都会立即加载并显示。一旦开始滚动,它就可以正常工作,似乎只在首次加载页面时才会发生。我在脚本中写错了什么?我认为这与 .hide 函数有关,直到用户滚动时才会激活,但我不知道如何以不同的方式编写它。
谢谢。
这是该站点,因此您可以看到我在说什么:
http://pixel.csueastbay.edu/3870/corzine/project1/index.html
这是一个 js 示例:
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 290) {
$(".fallingman").hide();
}
if ($(this).scrollTop() < 290) {
$(".fallingman").show();
}
});
$(window).scroll(function() {
if ($(this).scrollTop() < 290) {
$(".fallingman2").hide();
}
if ($(this).scrollTop() > 290) {
$(".fallingman2").show();
}
if ($(this).scrollTop() > 1200) {
$(".fallingman2").hide();
}
});
</script>
最佳答案
将您想要的内容放入函数中。然后在页面加载时无条件调用它,也在滚动处理程序中调用它。
function checkScroll() {
var pos = $(window).scrollTop();
if (pos > 290) {
$(".fallingman").hide();
$(".fallingman2").show();
}
if (pos < 290) {
$(".fallingman").show();
$(".fallingman2").hide();
}
if (pos > 1200) {
$(".fallingman2").show();
}
)
$(function() {
checkScroll();
$(window).scroll(checkScroll);
});
关于javascript - .hide 和 .show 显示所有元素并且在用户滚动之前无法正常运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16621731/