html - 滚动时固定在屏幕顶部的顶部导航栏(在标题下)

Question

当滚动条在顶部浏览器显示时:

HTML:

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

当滚动条向下时浏览器正常显示:

HTML:

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

但是我想要:

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

我试过:

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

CSS:

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

但这只有在导航栏位于顶部时才有效。我的标题在上面...

Answer 1

DEMO

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

这是我用来固定标题(在您的情况下是导航栏)的 js。

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

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