Navbarが固まらない

Question

materialize.css、materialize.js、およびjquery 2.1.1を使用しています。

私は.jumbotron1の後にスティッキーなnavbarを構築しようとしています。私はそこにCSSを持っていますが、jqueryは動いていないようです。

私はこのチュートリアルに従っ：https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

CSS

body { 
    padding-top: 400px; 
} 

.row { 
    margin-bottom: 0; 
} 

.jumbotron1 { 
    width: 100%; 
    height: 400px; 
    background-color: #f5f5f5; 
    position: fixed; 
    top: 0; 
} 

/* navbar styling */ 
nav.navbarSticky { 
    margin-top: 0; 
    position: relative; 
} 

nav { 
    z-index: 998; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); 
} 

/*sticky navbar styling*/ 
.jumbotron1 .stuck { 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

/*lineup styling*/ 
.lineup1position { 
    position: relative; 
} 
.lineup1 { 
    height: 800px; 
    background-color: #f5f5f5; 
} 

HTML

<!--jumbotron 1--> 
<div class="container"> 
    <div class="row"> 
    <div class="col s12 valign-wrapper jumbotron1"> 
     <p class="valign center-block center-align"> 
     Andrea + Fiance<br> 
     </p> 
    </div> 
    </div> 
</div> 
<!--navbar--> 
<nav class="navbarSticky"> 
    <div class="nav-wrapper"> 
    <ul id="nav-mobile"> 
     <li><a href="#">line up</a></li> 
     <li><a href="#">tickets</a></li> 
     <li><a href="#">history</a></li> 
     <li><a href="#">venue</a></li> 
     <li><a href="#">details</a></li> 
    </ul> 
    </div> 
</nav> 
<!--lineup1--> 
<div class="container lineup1position"> 
    <div class="row"> 
    <div class="col s8 offset-s2 lineup1"> 
     <p class="center-align"> 
     lineup<br> 
     andrea - fiance<br> 
     made of honor - best man<br> 
     bridesmaid - groomsman - bridesmaid - groomsman<br> 
     </p> 
    </div> 
    </div> 
</div> 

ではJavaScript

var sticky = $(".navbarSticky") 
    var stuck = "stuck"; 
    var hdr = $('.jumbotron1').height(); 

    $(window).scroll(function() { 
    if($(this).scrollTop() > hdr) { 
     sticky.addClass(stuck); 
    } else { 
     sticky.removeClass(stuck); 
     } 
    }); 

Answer 1

position:relative is overriding position:fixed 

これは

を変更

だから私が作ったこのスニペットを見てみましょう

新しいクラス

#topContainer{ 
    display:inline-block; 
    width:100%; 
    z-index:1001; 
} 


.stuck { 
    width: 100%; 
    display:inline-block; 
    top: 10px; 
    z-index:1001; 
    position:fixed !important; 
} 
.fixContainer{ 
    position:fixed !important; 
    top:0px; 
} 

HTML

トップコンテナに追加id属性

<div class="container" id ="topContainer"> 
    // rest of code 

JS

var sticky = $(".navbarSticky") 
    var stuck = "stuck"; 
    var hdr = $('.jumbotron1').height(); 
    $(window).scroll(function() { 
    console.log($(this).scrollTop(),hdr) 
    if($(this).scrollTop() > hdr) { 
    $("#topContainer").addClass("fixContainer") //Change here 
     sticky.addClass(stuck); 
    } else { 
    $("#topContainer").removeClass("fixContainer") //Change here 
     sticky.removeClass(stuck); 
     } 
    }); 

これは、JSFIDDLEで確認できます。私はdiv.lineup1positionはそうあなたに

編集、それを残してスクロールする起こっているかわからないので、現在div.lineup1positionが原因liに添付のz-indexプロパティのli下にスクロールしている

：addClass & removeClassが正しくありused.Soその部分を削除する

Answer 2

あなたの粘着性クラスがオンになっていませんに対応して：正しい要素

CSS（.jumbotron1が.stuckを持っている場合にのみ動作します）：

/*sticky navbar styling*/ 
.jumbotron1 .stuck { 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

jQueryの（.navbarStickyに.stuckをstettingれる）

sticky.addClass(stuck); 

---

編集以下のコメント。

あなたは

.jumbotron1, 
.stuck { 

のようなCSSセレクタを必要とするので、あなたが.navbarStickyが立ち往生することにしたい、とあなたは.jumbotron1と同じスタイリングを使用している。また、あなたのジャンボトロンは一度width: 100%;に設定されているので、ことを心に留めてカンマを追加すると、ナビがジャンボトロンの下にある可能性があります。私は、HTMLの自然のzインデックスの順序を忘れて、いずれにせよ、それを修正するために、追加します。

.stuck { 
    z-index: 10; 
} 

これ、ところで、あなただけ.jumbotron1にそれを追加しない.stuckに追加します。

ここ

nav.navbarSticky { 
     margin-top: 0; 
     position: relative; 
    } 

の相対位置がstuckクラス でposition:fixedをオーバーライドしているこのCSSクラスで