jQuery：如何在屏幕頂部保留DIV，並在滾動後恢復其位置（並達到其原始位置）

我想要一個div元素來執行類似於gmail的操作。jQuery：如何在屏幕頂部保留DIV，並在滾動後恢復其位置（並達到其原始位置）

當向下滾動，一旦Gmail的菜單（歸檔，垃圾郵件，刪除...等）到達屏幕的頂部，它在那裏停留。
向上滾動時，菜單返回到原來的位置。

另一個樣品是這個頁面的側邊欄：sample 2

如何做到這一點用一個簡單的（和易於理解的）jQuery代碼？（兼容所有瀏覽器）

<div id="header">Menu goes here =)</div>

來源

2011-10-13 Omar

我討厭外掛我的博客，但我在後解決了這個確切的問題。 http://www.dittocode.com/how-to-emulate-gmails-floating-menu-bar-with-jquery/

具體到你的問題，試試這個：

CSS：

#header.floating { 
    position: fixed; 
    top: 0; 
}

的JavaScript：

$(document).ready(function() { 

    $(window).scroll(function() { 
     if ($(window).scrollTop() > $('#header-wrapper').offset().top) 
      $('#header').addClass('floating'); 
     else 
      $('#header').removeClass('floating'); 
    }); 

});

的jsfiddle：http://jsfiddle.net/omarjuvera/0p9p43Lz/

來源

2011-10-13 22:09:24

+1非常酷。但是，您可能希望發佈代碼，因爲站點的鏈接有時會因爲網站出現故障而被拒絕。 – griegs

另外，如果您將其轉換爲可以成爲非常有用的工具的插件。 – griegs

與此代碼，菜單消失，並在滾動時重新出現:-(如何解決？http://www.punkbunny.com/tmp/scroll/top_n_restore2.html – Omar

你可以試試這個：

<script> 
var name = "#floatMenu"; 
var menuYloc = null; 
$(document).ready(function(){ 
     menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) 
     $(window).scroll(function() { 
      offset = menuYloc+$(document).scrollTop()+"px"; 
      $(name).animate({top:offset},{duration:1000,queue:false}); 
     }); 
}); 
</script>

而一些CSS的浮動DIV叫floatMenu：

#floatMenu { position:relative; width:100%px; top:0px; left:0px; }

這浮動的DIV：

<div id="floatMenu">Your content</div>

它並沒有完全得到作爲例子同樣的效果，你給我們。這一個動畫和追逐你的屏幕...

來源

2011-10-13 22:32:01 TheCarver

這樣做的更好的方法是使用jQuery的航點。請看看這個sticky-elements example

此外，這裏是getting started部分的航點插件。

正如您在向下滾動時所看到的，該菜單將粘貼到頂部屏幕。

希望這是有幫助的。

來源

2012-10-26 02:38:23

，因爲鏈接不再工作，你介意添加你的答案作爲代碼？ – Omar

感謝您更新鏈接。如果鏈接再次「死亡」會怎麼樣？你想添加你的代碼作爲答案的一部分嗎？ – Omar

我懷疑他們會再次消失。開發人員更新了網站，並將鏈接更改爲其插件。所以，不用擔心。 –

jQuery：如何在屏幕頂部保留DIV，並在滾動後恢復其位置（並達到其原始位置）

回答

相關問題