.hide和.show显示所有元素，并且在用户滚动之前无法正常运行 [英] .hide and .show displaying all elements and not functioning properly until user scrolls

问题描述

您好，因此我正在一个垂直滚动站点上进行操作，在该站点上隐藏和显示固定的中心图像(主要角色)，具体取决于用户使用.scrolltop在页面上的位置.我唯一的问题是，当页面首次加载时，每个中心图像都会一次加载并显示.一旦开始滚动，它从一点开始就可以正常工作，似乎仅在首次加载页面时才发生.我在脚本中写错了什么?我认为这与.hide函数有关，直到用户滚动它才激活，但我不知道如何用不同的方式编写它.

Hello so I am working on a vertical scrolling site where fixed central image (the main character) hide and show depending on where the user is on the page using .scrolltop. The only problem I have is that when the page loads the first time, every single central image loads at once and is displayed. Once you begin scrolling it works correctly from the point on, it seems to only happen when the page is first loaded. What am I writing wrong in my script? I think it has to do with the .hide function not activating until the user scrolls, but I dont know how to write it differently.

谢谢.

这是网站，您可以看到我在说什么:

Here's the site so you can see what I'm talking about:

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>

推荐答案

将所需的内容放入函数中.然后在页面加载时以及在滚动处理程序中无条件调用它.

Put what you want into a function. Then call it unconditionally when the page loads, and also in the scroll handler.

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

这篇关于.hide和.show显示所有元素，并且在用户滚动之前无法正常运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！