1

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

例如：

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

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

到目前为止，我已经提出了以下代码，但它仅适用于 Div1 和 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/

4

2 回答 2

2

仅仅是因为 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');
 }

});
于 2013-08-12T05:58:17.403 回答
1

演示

您只需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');
    }
});
于 2013-08-12T05:58:58.317 回答