Navbar klebt nicht

Question

Ich verwende materialize.css, materialize.js und jquery 2.1.1.

Ich versuche eine sticky Navbar nach meinem .jumbotron1 zu konstruieren. Ich habe die CSS alle da, aber die JQuery scheint nicht zu laufen.

folgte ich dieses Tutorial: https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2

die 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; 
} 

die 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> 

die 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 

In diesem CSS-Klasse

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

Hier Position relativ position:fixed in stuck Klasse überschreiben wird Werfen Sie einen Blick auf diese Schnipsel

Also machte ich dies ändert

Neue Klassen

#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

Added id Attribut oberen Behälter

<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); 
     } 
    }); 

Sie können dies überprüfen JSFIDDLE.

Derzeit ist die div.lineup1position unterhalb li Scrollen wegen z-index-Eigenschaft auf li angebracht Da ich nicht sicher bin, wie div.lineup1position wird so bewegen es auf Sie verlassen

Edit: addClass & removeClass richtig sind used.So Entfernen dieses Teils

Answer 2

Ihre klebrige Klasse nicht eingeschaltet ist korrekt das Element

CSS (funktioniert nur, wenn .jumbotron1 hat .stuck):

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

jQuery (wird stetting .stuck zu .navbarSticky)

sticky.addClass(stuck); 

---

Edit: Als Reaktion auf die kommentiere unten.

Sie wollen .navbarSticky geklebt werden, und Sie werden mit dem gleichen Styling wie .jumbotron1, so benötigen Sie einen CSS-Selektor wie

.jumbotron1, 
.stuck { 

auch bedenken, dass seit Ihrem jumbotron zu width: 100%;, das gesetzt wird, wenn Sie fügen Sie das Komma hinzu, Ihr Nav kann unter dem Jumbotron sein. Ich vergesse die natürliche z-index, um von html, aber in jedem Fall, um es zu beheben, fügen:

.stuck { 
    z-index: 10; 
} 

Dies, BTW, Sie fügen nur .stuck nicht hinzufügen, es zu .jumbotron1.