如何使div滾動到當前的div標頭

我想創建一個div，位於內容塊的下方，但是一旦頁面滾動到足夠的位置聯繫其頂部邊界，固定到位並與頁面一起滾動。我知道我在網上看到過至少有一個這樣的例子，但我無法記住它的一生。如何使div滾動到當前的div標頭

$(document).ready(function() { 
    $(window).scroll(function() { 
    }); 
});

我試圖把這個內容顯示在此小提琴

http://jsfiddle.net/HQS8s/

，但不知道如何實現這一點，請你讓我知道如何做這個？？

來源

2015-04-07 Kiran

StickyJS是你可能想給一個試試jQuery插件，它的確如此：http://stickyjs.com/ – Salketer

儘管這個功能不應該是太多的代碼。但是我們究竟在討論什麼樣的粘性元素 - 它應該放在哪裏？ – Shikkediel

我不確定你提到的是什麼，我猜它應該在哪裏添加數據，它可以在任何地方（在提到的小提琴的類命名數據上面） – Kiran

我已經修改您的jsfiddle如下（這是我從你的問題明白，如果我錯了饒了我吧）

$(document).ready(function() { 
    var $window = $(window), 
     $headerBar = $('#headerBar'), 
     $headerBarAnchor = $('#headerBarAnchor'); 

     $(window).scroll(function() { 
     var window_top = $window.scrollTop(); 
     var div_top = $headerBarAnchor.offset().top; 
     if (window_top > div_top) { 
      // Make the div sticky. 
      $headerBar.addClass('stick'); 
      $headerBarAnchor.height($headerBar.height()); 
     } 
     else { 
      // Unstick the div. 
      $headerBar.removeClass('stick'); 
      $headerBarAnchor.height(0); 
     }  
     }); 
});

檢查http://jsfiddle.net/jWaEv/12/

來源

2015-04-07 08:28:28

非常感謝，如果我在標題2中滾動，標題不可見。有什麼困惑嗎？ – Kiran

你的意思是單獨滾動標題2然後標題1隱藏和滾動標題1然後標題2隱藏像這樣 –

非常感謝回覆，我需要一個類似的網站，如下所示http://slinky.iclanzan.com / – Kiran

如何使div滾動到當前的div標頭

回答

相關問題