Question

我需要创建一个jQuery脚本来显示和隐藏依赖于滚动位置的div。

例如：

在页面上，我将有三个等分的水平部分（可能在不同的页面上有3个以上）。在每个部分的右侧，我将有一个“联系我们”框。但是我不想简单地在每个部分放置联系人框。相反，当用户滚动时，我希望此联系人框从第1部分消失，并在页面向下滚动时出现在第2部分等等。

我将有这5个不同的页面，每个页面将有不同数量的水平部分。有些可能有2个，有些可能有5个，有些可能有3个......等等。

到目前为止，我已经提出了以下代码，但它仅适用于Div1＆amp; 2，我不确定为什么在我从顶部滚过250px后div3没有出现。

$(window).scroll(function() {
if ($(this).scrollTop() > 150 ){
    $("#div1").css('visibility', 'hidden');
    $("#div2").css('visibility', 'visible');
    $("#div3").css('visibility', 'hidden');

}
 else if ($(this).scrollTop() > 250 ){
        $("#div1").css('visibility', 'hidden');
        $("#div2").css('visibility', 'hidden');
        $("#div3").css('visibility', 'visible');
 } 
else {
 $("#div1").css('visibility', 'visible');
 $("#div2").css('visibility', 'hidden');
 $("#div3").css('visibility', 'hidden');
 }

});

可以在此处找到jSfiddle：http://jsfiddle.net/FQgT3/1/

Answer 1

仅仅因为div3可见的条件永远不会被击中，当你超过250时，你也超过150，所以第一个条件是真的，第二个条件没有被测试。

这应该有效：

$(window).scroll(function() {
if ($(this).scrollTop() > 150 && $(this).scrollTop() < 250){
    $("#div1").css('visibility', 'hidden');
    $("#div2").css('visibility', 'visible');
    $("#div3").css('visibility', 'hidden');

}
 else if ($(this).scrollTop() > 250 ){
        $("#div1").css('visibility', 'hidden');
        $("#div2").css('visibility', 'hidden');
        $("#div3").css('visibility', 'visible');
 } 
else {
 $("#div1").css('visibility', 'visible');
 $("#div2").css('visibility', 'hidden');
 $("#div3").css('visibility', 'hidden');
 }

});

Answer 2

DEMO

你只需要先使用if ($(this).scrollTop() > 250)条件，这样每次检查时都会检查它，而不是检查else if ($(this).scrollTop() > 150)是否有效。

如果您知道第一个条件是否有效，则不会被检查。

所以我只是交换了if条件并且有效

$(window).scroll(function () {
    if ($(this).scrollTop() > 250) {
        $("#div1").css('visibility', 'hidden');
        $("#div2").css('visibility', 'hidden');
        $("#div3").css('visibility', 'visible');
    } else if ($(this).scrollTop() > 150) {
        $("#div1").css('visibility', 'hidden');
        $("#div2").css('visibility', 'visible');
        $("#div3").css('visibility', 'hidden');
    } else {
        $("#div1").css('visibility', 'visible');
        $("#div2").css('visibility', 'hidden');
        $("#div3").css('visibility', 'hidden');
    }
});

jQuery根据滚动位置显示或隐藏div

2 个答案: