如何制作一個導航欄，使頁面像這樣經過某個點滾動？

Question

如何使導航欄如下所示，當用戶向下滾動時，在某個點之后，導航欄會停留在左側並隨着用戶向下滾動而滾動：

http://developer.android.com/design/get-started/ui-overview.html

理想情況下，想知道是否有簡單的javascript解決方案，或者jquery是首選方法。 用div塊可以理解示例。 我知道這里有職位：親戚； 屬性，但我不知道如何將其與（javascript？）配合使用，以使其僅在用戶向下滾動頁面超過特定點后才粘貼。

Answer 1

您可以通過檢查元素來進行大量挖掘。 我看了一下nav，它的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找到它）

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

是的，希望從這里可以得到一個想法。 有很多方法可以做到這一點，但是自從您展示了這個示例以來，我只是向您展示了他們擁有的代碼，也許您可​​以從中借鑒一些東西。 如果您需要幫助，請隨時發表評論。

Answer 2

Twitter Bootstrap具有一個“附件”組件，可以為您完成此任務-http://rc.getbootstrap.com/javascript.html#affix

如果您想自己寫類似的東西，則需要：

• 將元素設置為“ position：absolute”（如果將父元素設置為“ position：relative”，通常可以這樣做）。

• 創建一個onscroll事件處理程序，並在其中檢查元素距視口頂部或底部的距離。

• 當您希望位置保持可見時（例如，一旦用戶向下滾動100像素），將位置設置為“固定”，否則將其設置為絕對位置。

Answer 3

Anthony Garand的sticky.js jQuery插件對我來說效果很好。

Answer 4

如果您不想使用其他插件，可以使用jquery window.scrollTop（）進行此操作。