用滾動顯示/隱藏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

回答

相關問題