固定位置CSS

Question

在我的网站上，我的标题下面有一个带有一些快速链接的div。我使用http://davidwalsh.name/persistent-header-opacity来让这个div始终显示在屏幕上。但是，我希望它显示在顶部(position:fixed;top:0px;，但仅当原始位置已通过。换句话说，我不想让它停留在顶部，直到用户滚动过它。多么?

Answer 1

您可以使用JavaScript执行此操作，方法是侦听scroll事件并根据滚动位置响应样式更改：

var nav = document.getElementById('hmenus'); 
var navTop = nav.offsetTop;

window.onscroll = function(e) { 
  var scrollY = window.scrollY ? window.scrollY : document.documentElement.scrollTop;
  if (navTop < scrollY) {
    nav.style.position = 'fixed'; nav.style.top = 0;
  } else { 
    nav.style.position = ""; nav.style.top = "";
  }
}

Firebug #hmenus是一个stackoverflow元素，所以你可以在​中尝试一下。:-)

Answer 2

1. On page load创建一个包含菜单默认顶部偏移量的变量。
2. 监视scroll事件，如果scrollTop >原始顶部偏移量，则使位置固定，否则为static.
3. Profit.

示例

http://jsfiddle.net/49gPT/

Answer 3

这里有一个新方法的解决方案。

使用position:sticky跟随滚动。

这是这篇文章的解释。

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

这是一种老方法，demo

使用sticky position demo