0

如何使导航栏如下所示，当用户向下滚动时，在某一点之后，导航栏停留在左侧并随着用户向下滚动而滚动：

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

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

4

4 回答 4

1

You can do a lot of digging by inspecting elements. I took a look at the nav and it has an id of devdoc-nav. If you go into Resources they have a js file called doc.js that has this code:

  // 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();
  }

You don't necessarily have to understand everything that is going on but the basic idea I want to show you is that all you see is done through CSS. The javascript is simply used to apply that CSS at the right times. When the user scrolls past a certain point, the webpage applies a class called fixed (you can find this in the default.css)

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

So yeah hopefully from here you can get an idea. There are many ways to go about doing this but since you showed this example, I am simply showing you the code they have and maybe you can draw something from it. If you need help, don't hesitate to comment.

于 2012-12-18T03:46:36.603 回答
0

Twitter Bootstrap 有一个 'affix' 组件可以为你做这件事 - http://rc.getbootstrap.com/javascript.html#affix

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

  • 将元素设置为“position:absolute”（如果将父元素设置为“position:relative”，这通常是可以的）。

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

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

于 2012-12-18T03:15:58.023 回答
0

Anthony Garand 的sticky.jsjquery 插件对我来说效果很好。

于 2012-12-18T03:17:15.387 回答
0

如果您不想要其他插件，可以使用 jquery window.scrollTop() 来执行此操作。

于 2012-12-18T03:18:38.067 回答