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

Question

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

HTML：

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

向下滚动滚动条时，浏览器通常显示：

HTML：

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

但我想拥有：

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

我尝试了：

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

CSS：

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

但这仅在导航栏位于顶部位置时有效。 我的头顶在...

Answer 1

DEMO

我在顶部使用了图片，而不是您的问题中提到的“ HEADER”。

这是我用来固定标题（在您的情况下为navbar）的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

一般的策略是观察窗口顶部附近有多近，然后THEN放置其CSS position: fixed像您尝试的那样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属性的顶部，左侧，底部，右侧。 在您的情况下，您只需要将Laft右上角设置为0并设置一个固定高度，例如30px。