固定スティッキーサイドバーを構築するための問題

私はブートストラップを学んでいて、自分のカスタム水平ナビゲーションバーがページの一番上にくるようにしたいです（thisのように）。 CSSとJSコードの両方にアタックスクラスを追加しようとしましたが、動作しません。どうした？ https://jsfiddle.net/bs7bdpmh/固定スティッキーサイドバーを構築するための問題

HTML

<div id="nav" class="container-fluid"> 
    <nav class="navbar-classic"> 
    <li><a href="index.html" class="active">Who are we? </a> 
     <ul class="dropdown"> 
     <li><a href="#">Sub 1</a></li> 
     <li><a href="#">Sub 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Services Services Services</a> 
    </li> 
    <li><a href="#">Products Products Products</a> 
    </li> 
    </nav>

CSS

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 70px; 
    background: #fff; 
    z-index:10; 
}

$('#nav').affix({ 
     offset: { 
     top: $('header').height() 
     } 
});

出典

2016-03-27 Greg

あなたのフィドルコードは、Bootstrap JavaScriptとjQueryの依存関係を追加するときに機能します。 – str

あなたはこのような何かを意味を参照してください？

See this fiddle

JS：;あなたは、通常のブートストラップを使用している場合、解決策がある

出典

2016-03-27 17:20:24

ありがとう！なぜ修正メニューでメニュー項目がビューポートの右端に、左端にロゴがあるのか知っていますか？（最初のメニューと同じコンテナ幅内に置いておきたい） – Greg

固定メニューと同じ幅が必要な場合は、それを指定する必要がありますこの＃nav.affixの幅を確認してください;） –

）もちろん

$(window).scroll(function(){ 
    scrollTop = $(window).scrollTop(); 
    if(scrollTop > 50){ 
    $('#nav').addClass('affix'); 
    }else{ 
    $('#nav').removeClass('affix'); 
    } 
});

、それは完璧ではないのですが、私はあなたのCSSコードやHTMLの構造を適応させ簡単

<style> 
    /* Note: Try to remove the following lines to see the effect of CSS positioning */ 
    .affix { 
     top: 0; 
     width: 100%; 
    } 

    .affix + .container-fluid { 
     padding-top: 70px; 
    } 
    </style> 
</head> 
<body> 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> 
    <h1>Bootstrap Affix Example</h1> 
    <h3>Fixed (sticky) navbar on scroll</h3> 
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p> 
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p> 
</div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Basic Topnav</a></li> 
    <li><a href="#">Page 1</a></li> 
    <li><a href="#">Page 2</a></li> 
    <li><a href="#">Page 3</a></li> 
    </ul> 
</nav>

そして、navあなたがボトムにスクロールするときは、次のようなものを使用してください：

$(window).scroll(function(){ 
     if($(window).scrollTop() + $(window).height() == $(document).height()) 
     { 
     $('#nav').addClass('affix'); 
     } 

});

出典

2016-03-27 17:35:37

固定スティッキーサイドバーを構築するための問題

答えて

関連する問題