Javascript 如何制作一个导航条，使页面滚动超过某个点，就像这样？

如何使导航栏如下图所示，当用户向下滚动时，在某一点之后，导航栏会固定在左侧，并在用户向下滚动时滚动：

---

我想知道是否有一个简单的javascript解决方案，或者jquery是否是首选方法。示例将与div块一起使用。我知道有一个位置：相对的；属性，但我不知道如何将其与（javascript？）结合使用，以使其仅在用户向下滚动页面超过某个点后才会粘住

Twitter引导程序有一个“粘贴”组件，可以为您执行此操作-

如果你想自己写类似的东西，你需要：

• 将元素设置为“位置：绝对”（如果将父元素设置为“位置：相对”，则通常可以）

• 制作一个onscroll事件处理程序，并在其中检查元素与视口顶部或底部的距离

• 当您希望位置保持可见时（例如，一旦用户向下滚动100px），将其设置为“固定”，当您不希望位置保持可见时，将其设置为“绝对”

---

Anthony Garand的jquery插件对我来说运行得非常好。

如果不需要其他插件，可以使用jquery window.scrollTop（）来执行此操作。

可以通过检查元素进行大量挖掘。我看了一下导航，它有一个

id

的

devdoc-nav

。如果您进入参考资料，他们有一个名为

doc.js

的js文件，其中包含以下代码：

  // Set up fixed navbar
  var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll
  $(window).scroll(function(event) {
    if ($('#side-nav').length == 0) return;
    if (event.target.nodeName == "DIV") {
      // Dump scroll event if the target is a DIV, because that means the event is coming
      // from a scrollable div and so there's no need to make adjustments to our layout
      return;
    }
    var scrollTop = $(window).scrollTop();    
    var headerHeight = $('#header').outerHeight();
    var subheaderHeight = $('#nav-x').outerHeight();
    var searchResultHeight = $('#searchResults').is(":visible") ? 
                             $('#searchResults').outerHeight() : 0;
    var totalHeaderHeight = headerHeight + subheaderHeight + searchResultHeight;
    var navBarShouldBeFixed = scrollTop > totalHeaderHeight;

    var scrollLeft = $(window).scrollLeft();
    // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match
    if (navBarIsFixed && (scrollLeft != prevScrollLeft)) {
      updateSideNavPosition();
      prevScrollLeft = scrollLeft;
    }

    // Don't continue if the header is sufficently far away 
    // (to avoid intensive resizing that slows scrolling)
    if (navBarIsFixed && navBarShouldBeFixed) {
      return;
    }

    if (navBarIsFixed != navBarShouldBeFixed) {
      if (navBarShouldBeFixed) {
        // make it fixed
        var width = $('#devdoc-nav').width();
        $('#devdoc-nav')
            .addClass('fixed')
            .css({'width':width+'px'})
            .prependTo('#body-content');
        // add neato "back to top" button
        $('#devdoc-nav a.totop').css({'display':'block','width':$("#nav").innerWidth()+'px'});

        // update the sidenaav position for side scrolling
        updateSideNavPosition();
      } else {
        // make it static again
        $('#devdoc-nav')
            .removeClass('fixed')
            .css({'width':'auto','margin':''})
            .prependTo('#side-nav');
        $('#devdoc-nav a.totop').hide();
      }
      navBarIsFixed = navBarShouldBeFixed;
    } 

    resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance
  });


  var navBarLeftPos;
  if ($('#devdoc-nav').length) {
    setNavBarLeftPos();
  }

你不必理解正在发生的一切，但我想告诉你的基本想法是，你所看到的都是通过CSS完成的。javascript只是用来在正确的时间应用CSS。当用户滚动超过某个点时，网页将应用一个名为

fixed

的类（您可以在

default.css

中找到该类）

---

所以，是的，希望你能从这里得到一个想法。有很多方法可以做到这一点，但既然你展示了这个例子，我只是向你展示他们的代码，也许你可以从中吸取一些东西。如果您需要帮助，请不要犹豫发表评论。

“请举例说明。”真的吗？为什么不给我们展示一些你尝试过的例子。这是否意味着我提供的例子，谷歌实际上使用了Jquery？是的。如果您查看文件

global libraries combined.js

下的资源，它们将一系列库分解为一个js文件，包括jquery、jqueryui、prettify、jScrollPane等

  #devdoc-nav.fixed {
  position: fixed;
  margin:0;
  top: 20px; }