Question

不再需要提问。删除。

Answer 1

您可以检查导航的位置，如果它位于窗口顶部之上，那么您可以使用：

position: fixed;
left: 0;
top: 0;

我无法真正看到你在jsfiddle链接中的位置，但这就是我要去做的事情。

Answer 2

如果您想在页面上的某个点滚动后保持导航固定，那么您将不得不编写一些JavaScript，因为它无法通过CSS实现。

$(document).ready(function() {
  var navpos = $('nav').offset();
    $(window).bind('scroll', function() {
      if ($(window).scrollTop() > navpos.top) {
        $('nav').addClass('fixed');
       }
       else {
         $('#nav').removeClass('fixed');
       }
    });
});

的CSS

.fixed {
   position: fixed;
   left: 0;
   top: 0;
}

Answer 3

使用javascript检查文档的滚动，如果不是0，则将此类添加到导航栏中：

.sticked{
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

并按照以下方式切换课程：

var nav = document.querySelector(".nav");
window.addEventListener("scroll", handle_scroll);
function handle_scroll (e) {
    var scroll = window.pageYOffset || document.documentElement.scrollTop;
    if(scroll > 0){
        nav.classList.add("sticked");
    }else{
        nav.classList.remove("sticked");
    }
}

如何使用滚动条制作导航栏

3 个答案: