DEMO

Question

当滚动条位于顶部时，浏览器显示：

HTML：

-------------------------
|   HEADER              |
-------------------------
|   NAVBAR              |
-------------------------
|   body                |
-------------------------

当滚动条停止时，NOW浏览器通常会显示：

HTML：

-------------------------
|                       |
|   body                |
|                       |
-------------------------

但我想：

-------------------------
|   NAVBAR              |
-------------------------
|                       |
|   body                |
|                       |
-------------------------

我尝试过：

<div id="navbar">...</div>

CSS：

#navbar {
  position:fixed;
  z-index:1;
}

但这只适用于导航栏位于顶部位置的情况。我头上有标题......

Answer 1

DEMO

我在顶部使用了一个图像而不是＆＃34; HEADER＆＃34;在你的问题中提到。

这是我用来制作标题的js（在你的情况下是导航栏）。

var stickyNavTop = $('#header').offset().top;

$(window).scroll(function() {  
    if ($(window).scrollTop() > stickyNavTop) {
        $('#header').addClass('fixed');
    }
    else {
        $('#header').removeClass('fixed');
    }  
});

Answer 2

潜在的解决方案或一类解决方案称为Affix。

请参阅此处的boostrap示例：

http://getbootstrap.com/javascript/#affix

一般策略是观察某些内容与窗口顶部的接近程度，然后像您尝试的那样制作CSS position: fixed。

当你需要追踪它来自原始的位置时，这可能比你自己实现的要复杂得多。

Answer 3

以下是从html5rocks中获取的一个很好用的例子。

<style>
.sticky {
  position: fixed;
  top: 0;
}
.header {
  width: 100%;
  background: #F6D565;
  padding: 25px 0;
}
</style>

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>

进一步阅读：http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

当然，.header这是你的NAVBAR。

Answer 4

你会告诉#navbar它应该在哪里修复。使用css属性top，left，bottom，right。在您的情况下，您只需要将右上角设置为0和固定高度，例如30px。

滚动时，顶部导航栏（在标题下方）固定在屏幕顶部

4 个答案:

DEMO