用滚动显示/隐藏div

我知道标题不是最具描述性的，还有很多类似这样的问题的主题，但我找不到任何答案。事实上，我非常感谢你们，这就是我想要做的。用滚动显示/隐藏div

我有一个DIV，当页面滚动到某个位置（触发器）时，我想显示，标记为#othdiv。当您向下滚动到标记为＃othdiv2的下一个位置（触发器）时，此DIV消失。

这感觉就像是一个非常简单的解决方案，但我无法弄清楚。我已经尝试了有条件的if语句，重复代码，删除行，新变量...叹气......请帮忙。

$(document).ready(function() { 
$("#dvid").hide(); //hide your div initially 
var topOfOthDiv = $("#othdiv").offset().top; 
var topOfOthDiv2 = $("#othdiv2").offset().top; 
$(window).scroll(function() { 
    if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div? 
     $("#dvid").show(); //reached the desired point -- show div 
    } 
     else 
    if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?     
     $("#dvid").hide(); //reached the desired point -- show div    
    }   
    }); 
});

当前的代码示例： http://jsfiddle.net/DnJ2z/124/

底线：我试图做一些类似的：http://mailchimp.com/2012/（注意标题[应用程序，支持，运营等]）

来源

2013-05-27 coes

[jsfiddle]（http://jsfiddle.net/DnJ2z/125/） –

你们真棒！现在，如果我可以滥用你的好意：如何添加一个'缓冲区'到topOfthDiv。意思是，现在当div滚动触及div时，div隐藏/显示。我怎么做才能让它在切换之后切换，例如，在滚动到div后200px。这有道理吗？ – coes

阿哈，我添加了一个“位置：相对;顶部：200px;”到奥斯，解决了问题。谢谢！ – coes

我正在玩弄你的小提琴，并设法让它工作。检查它是否是你想要什么：

$(document).ready(function() { 
    $("#dvid").hide(); //hide your div initially 
    var topOfOthDiv = $("#othdiv").offset().top; 
    var topOfOthDiv2 = $("#othdiv2").offset().top; 
    $(window).scroll(function() { 
     if($(window).scrollTop() > topOfOthDiv && $(window).scrollTop() < topOfOthDiv2) { //scrolled past the other div? 
      $("#dvid").show(); //reached the desired point -- show div 
     } 
      else 
     if($(window).scrollTop() < topOfOthDiv || $(window).scrollTop() > topOfOthDiv2) { //scrolled past the other div?     
      $("#dvid").hide(); //reached the desired point -- show div    
     }   
    }); 
});

来源

2013-05-27 23:32:09 ThiagoPXP

尝试使用&&为：如果（这个和那个）{做某事}否则{不}

Working Example

$(document).ready(function() { 
    var topOfOthDiv = $("#othdiv").offset().top; 
    var topOfOthDiv2 = $("#othdiv2").offset().top; 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > topOfOthDiv && $(window).scrollTop() < topOfOthDiv2) { 
      $("#dvid").show(); 
     } else { 
      $("#dvid").hide(); 
     } 
    }); 
});

为了更好地解释逻辑运算符，请查看：Logical Operators MDN

来源

2013-05-28 00:20:09 apaul

用滚动显示/隐藏div

回答

相关问题