如何創建一個在滾動時保持在最前面的酒吧？

我試圖創建一個div，保持固定頂部時，用戶向下滾動，當他滾動備份，回到原來的位置。如何創建一個在滾動時保持在最前面的酒吧？

我需要這個完全一樣的行爲9GAG提供 - >http://9gag.com/gag/293756

謝謝！

來源

2011-09-29 Diego Gomes

如果你需要*確切的*相同的行爲，你檢查了源代碼？ – Alex

執行以下操作：

在$(window)創建scroll event handler。
在此事件處理程序中，檢查用戶是否滾動得比您始終想要查看的元素的頂部低。您可以使用offest和scrollTop方法來執行此操作。
如果是，請使用top: 0將元素設置爲position: fixed。您可能還需要調整左側屬性，具體取決於您的佈局。
如果否，請將元素設置爲position: static。

來源

2011-09-29 00:19:02 Pat

你試過了什麼嗎？在http://jsfiddle.net上放一下。如果你卡住了，我會幫忙的。 – Pat

創建完全相同的行爲9gag.com代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<!-- tags html, header, body, divs, anything --> 

<div id="post-control-bar" class="spread-bar-wrap"> 
    <div class="spread-bar" style="width:600px"> 
     Facebook button, Twitter button, anything... 
    </div> 
</div> 

<script type="text/javascript"> 
window.onscroll = function() 
{ 
    if(window.XMLHttpRequest) { 
     if (document.documentElement.scrollTop > 173 || self.pageYOffset > 173) { 
      $('post-control-bar').style.position = 'fixed'; 
      $('post-control-bar').style.top = '0'; 
     } else if (document.documentElement.scrollTop < 173 || self.pageYOffset < 173) { 
      $('post-control-bar').style.position = 'absolute'; 
      $('post-control-bar').style.top = ''; 
     } 
    } 
} 
</script> 

<!-- content, footer, anything -->

來源

2011-09-29 01:45:31

使用Jquery的航點插件：http://imakewebthings.github.com/jquery-waypoints/

非常容易實現。

來源

2011-09-29 11:55:19