web-dev-qa-db-ja.com

ページの上部にナビゲーションバーを保持するにはどうすればよいですか？

forbes.com のように、ナビゲーションバーをページの上部に表示したままにします。

私ができることを知っています

nav
{
   position: fixed;
   top: 0;
}

ナビゲーションバーはページの上部ではなく、ロゴの後に表示されます...ただし、下にスクロールすると、ナビゲーションバーが画面の上部に固定されます。

これは私のサイトです

htmlcssnavigationfixed
8
Adam Scot

ソリューションは簡単です、CSSを維持しながらpxを追加します

nav
{
   position: fixed;
   top: 0px;
}
5
user2584704

あなたはこのようにJQueryでそれを試すことができます：

HTML：

<div id="wrapper">

    <header>
        <h1>Floater Navigation</h1>
    </header>

    <nav>
        <p>Navigation Content</p>
    </nav>

    <div id="content">
            <p>Lorem Ipsum.</p>
    </div>
</div>

CSS：

#wrapper {
    width:940px;
    margin: 0 auto;
}

header {
    text-align:center;
    padding:70px 0;
}

nav {
    background: #000000;
    height: 60px;
    width: 960px;
    margin-left: -10px;
    line-height:50px;
    position: relative;
}

#content {
    background: #fff;
    height: 1500px; /* presetting the height */
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.fixed {
    position:fixed;
}

JQuery：

$(document).ready(function() {

    // Calculate the height of <header>
    // Use outerHeight() instead of height() if have padding
    var aboveHeight = $('header').outerHeight();

    // when scroll
    $(window).scroll(function(){

        // if scrolled down more than the header’s height
        if ($(window).scrollTop() > aboveHeight){

            // if yes, add “fixed” class to the <nav>
            // add padding top to the #content 
            // (value is same as the height of the nav)
            $('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');

        } else {

            // when scroll up or less than aboveHeight,
            // remove the “fixed” class, and the padding-top
            $('nav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});

ソース： http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/

5
mrtriangle

JQueryなしでそれを行う方法を次に示します。スクロールリスナーをウィンドウに設定し、スクロールが正しい位置に到達したときにナビゲーションバーのクラスを切り替えることで機能します。

var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");

window.addEventListener("scroll", function(evt) {
  if (body.scrollTop > navigation.getBoundingClientRect().bottom) {
    // when the scroll's y is bigger than the nav's y set class to fixednav
    navigation.className = "fixednav"
  } else { // Overwise set the class to staticnav
    navigation.className = "staticnav"
  }
});
h1 {
  margin: 0;
  padding: 10px;
}
body {
  margin: 0px;
  background-color: white;
}
p {
  margin: 10px;
}
.fixednav {
  position: fixed;
  top: 0;
  left: 0;
}
.staticnav {
  position: static;
}
#navigation {
  background-color: blue;
  padding: 10px;
  width: 100%;
}
#navigation a {
  padding: 10px;
  color: white;
  text-decoration: none;
}
<h1>
Hello world
</h1>
<nav id="navigation" class="staticnav"><a href="#">Home</a>  <a href="#">About</a>
</nav>
<!-- We initialize the nav with static condition -->
<p>
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
  Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
</p>
0
Oscar Belletti

あなたのCSSファイルで：

body {
    padding-top: 0px;
}
0
Andreas Damen

これは、ナビゲーションバーをスクロールした後、上部に固定される方法です。

.affix {
        top: 0px;
        margin: 0px 20px;
}
.affix + .container {
        padding: 5px;
}
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="50">
...
</nav>

「navbar」は独自にブロックを作成するので、cssファイルのマージンのみを記述するだけで済みます.navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } z-indexはその特定の要素に優先度を設定するため、他の要素はその要素をスクロールしません。 Z-indexが正の値の場合、優先度が最も高くなり、そうでない場合は負の値になります（負の値の場合）。これがお役に立てば幸いです。

0
Archita Sundaray