Question

在我的网站上，我的标题下方有一个快速链接。我正在使用http://davidwalsh.name/persistent-header-opacity始终在屏幕上保留div。但是，我希望它显示在顶部（position:fixed;top:0px;，但只有在原始位置通过后才显示。换句话说，我不希望它在用户滚过它之前一直粘在顶部。？

Answer 1

在页面加载时，创建一个包含菜单默认顶部偏移量的变量。
监控滚动事件，如果是scrollTop＆gt;原始的顶部偏移，使位置固定，否则静止。
利润。

实施例

http://jsfiddle.net/49gPT/

Answer 2

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

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 = "";
  }
}

#hmenus是一个stackoverflow元素，因此您可以在Firebug中尝试它。： - ）

Answer 3

以下是采用新方法的解决方案。

使用position:sticky跟随滚动。

以下是文章解释。

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

以及执行此操作的旧方式demo

sticky position demo

固定位置CSS

3 个答案:

实施例