41

サイトが最初に読み込まれたときに表示可能なページの下部に表示されるナビゲーション バーを作成しようとしています。ユーザーが下にスクロールすると、ナビゲーション バーが上にスクロールし、最終的に上部に固定されます。このサイトと同じようにBootstrapを使用していますが、このサイトがどのようにそれを行ったのかわかりません。何か助けはありますか？

エミュレートしようとしているナビゲーション バーのあるサイトは次のとおりです: http://www.blastprocessor.co.uk/

これが私のナビゲーションhtmlとcssコードです:

HTML:

<div class="navbar navbar-fixed-top" id="navbar">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#home">Home</a></li>
                    <li><a href="#service-link">Services</a></li>
                    <li><a href="#contact-link">Contact</a></li>
                </ul><!-- /.nav -->
            </div><!--/.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

そして、ここに私のCSSがあります：

.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
    color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
4

10 に答える 10

41

私はこれとまったく同じものを探していました。これは Bootstrap 3.0 で利用できると読んだことがありましたが、実際に実装することはできませんでした。これは私が思いついたもので、うまく機能します。非常にシンプルな jQuery と Javascript です。

ここで遊ぶためのJSFiddleがあります... http://jsfiddle.net/CriddleCraddle/Wj9dD/

このソリューションは、Web および StackOverflow 上の他のソリューションと非常によく似ています。これが役に立たない場合は、必要なものを検索してください。幸運を！

ここにHTMLがあります...

<div id="banner">
  <h2>put what you want here</h2>
  <p>just adjust javascript size to match this window</p>
</div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>

<div id='body_div'>
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>

これがCSSです...

html, body {
  height: 4000px;
}

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

#body_div {
  top: 0;
  position: relative;
  height: 200px;
  background-color: green;
}

#banner {
  width: 100%;
  height: 273px;
  background-color: gray;
  overflow: hidden;
}

#nav_bar {
  border: 0;
  background-color: #202020;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

//the below css are for the links, not needed for sticky nav
.nav_links {
  margin: 0;
}

.nav_links li {
  display: inline-block;
  margin-top: 4px;
}

.nav_links li a {
  padding: 0 15.5px;
  color: #3498db;
  text-decoration: none;
}

ここで、javacript を追加して、スクロール位置に基づいて修正クラスを追加および削除します。

$(document).ready(function() {
  //change the integers below to match the height of your upper div, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('#nav_bar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 551) {
      $('#nav_bar').removeClass('navbar-fixed-top');
    }
  });
});
于 2013-10-02T18:28:35.010 に答える
24

注（2015）：以下の質問と回答の両方が、廃止された古いバージョンのTwitterBootstrapに適用されます。

この作成機能と要素「スティッキー」は、Twitterのブートストラップに組み込まれており、Affixと呼ばれます。あなたがしなければならないのは追加することだけです：

<div data-spy="affix" data-offset-top="121">
  ... your navbar ...
</div>

タグの周りにあり、マニュアルで説明されているようにBootstrapのJSファイルをロードすることを忘れないでください。データ属性offset-topは、メニューコンポーネントを修正するためにページが（上から）スクロールされるピクセル数を示します。通常、これはページ上部のスペースです。

注：メニューが修正されるときは、不足しているスペースに注意する必要があります。修正とは、ページレイヤーから切り取り、スクロールしない別のレイヤーに貼り付けることを意味します。私は次のことをしています：

<div style="height: 77px;">
  <div data-spy="affix" data-offset-top="121">
    <div style="position: relative; height: 0; width: 100%;">
      <div style="position: absolute; top: 0; left: 0;">
        ... my menu ...
      </div>
    </div>
  </div>
</div>

77px貼り付けたコンポーネントの高さはどこですか。

于 2013-02-03T10:37:39.243 に答える
3

Bootstrap 4 では、このために新しいクラスがリリースされました。utilties docsによると：

クラスの粘着トップを適用します。

<div class="sticky-top">...</div>

ナビゲーションバーの位置に関するその他のオプションについては、こちらをご覧ください。また、position: sticky;すべてのブラウザーでサポートされているわけではないため、古いブラウザーをサポートする必要がある場合、これが最適なソリューションではない可能性があることに注意してください。

于 2019-04-24T14:07:15.547 に答える
2

あなたが使用することができますposition: sticky

#navbar {
  position: sticky;
  top: 0px;
}

ただし、#navbar は body の直接の子である必要があります。

于 2014-10-17T11:38:37.277 に答える
1

Shubham Patwa への回答: この方法では、クラス「navbar-fixed-top」が適用されるとすぐにページが「ジャンプ」します。これは、#mainnav がドキュメントの DOM フローに出入りするためです。これは、ページに「クリティカルな高さ」があり、#mainnav の固定位置と固定されていない位置の間をジャンプする場合、見苦しい UX になる可能性があります。

私はこのようにコードを変更しました。

$(document).ready(function() {
  var navpos = $('#mainnav').offset();
  var navheight = $('#mainnav').outerHeight();

$(window).bind('scroll', function() {
  if ($(window).scrollTop() > navpos.top) {
   $('#mainnav').addClass('navbar-fixed-top');
   $('body').css('marginTop',navheight);
   }
   else {
     $('#mainnav').removeClass('navbar-fixed-top');
     $('body').css('marginTop','0');
   }
});
于 2016-02-22T10:24:24.270 に答える