0

ナビゲーションバーを次のように作成する方法。ユーザーが下にスクロールすると、特定のポイントの後、ナビゲーションバーが左側に固定され、ユーザーが下にスクロールするとスクロールします。

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

理想的には、これに対する単純なjavascriptソリューションがあるかどうか、またはjqueryが推奨される方法であるかどうかを知りたいと思います。例はdivブロックでいただければ幸いです。私は次のような立場があることを知っています。プロパティですが、（javascript？）を使用して、ユーザーが特定のポイントを超えてページを下にスクロールした後にのみ貼り付くようにする方法がわかりません。

4

4 に答える 4

1

要素を調べることで、多くの掘り下げを行うことができます。私はナビゲーションを見てみました、そしてそれはの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を適切なタイミングで適用するために使用されます。ユーザーが特定のポイントを超えてスクロールすると、Webページはと呼ばれるクラスを適用しfixedます（これはで見つけることができますdefault.css）

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

そうそう、うまくいけば、ここからあなたはアイデアを得ることができます。これを行うには多くの方法がありますが、この例を示したので、私は単にそれらが持っているコードを示しており、おそらくそれから何かを引き出すことができます。ヘルプが必要な場合は、遠慮なくコメントしてください。

于 2012-12-18T03:46:36.603 に答える
0

Twitter Bootstrapには、これを行う「接辞」コンポーネントがあります- 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 に答える