Problem, um eine feste klebrige Seitenleiste zu erstellen

Ich lerne Bootstrap und ich möchte meine benutzerdefinierte horizontale Navbar am oberen Rand der Seite, sobald sie es erreicht (wie this). Ich habe versucht, eine Affix-Klasse zu meinem CSS sowie ein Stück JS-Code hinzuzufügen, aber das funktioniert nicht. Was ist das Problem? Siehe https://jsfiddle.net/bs7bdpmh/Problem, um eine feste klebrige Seitenleiste zu erstellen

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

Quelle

2016-03-27 Greg

Ihr Fiddle-Code funktioniert, wenn Sie die Bootstrap JavaScript und jQuery Abhängigkeiten hinzufügen. – str

Sie meinen, so etwas wie das?

See this fiddle

JS:

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

Natürlich, es ist nicht perfekt, ich lasse Sie den CSS-Code und HTML-Struktur anzupassen;)

Quelle

2016-03-27 17:20:24

Danke! Weißt du warum mit dem Fix-Menü die Menüpunkte ganz rechts im Viewport und das Logo ganz links stehen? (Ich möchte, dass sie innerhalb der gleichen Containerbreite wie das ursprüngliche Menü bleiben) – Greg

Wenn Sie die gleiche Breite des nicht fixierten Menüs wünschen, müssen Sie es angeben Überprüfen Sie die Breite dieses # nav.affix;) –

Wenn Sie die Lösung normalen Bootstrap verwenden ist einfach

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

und wenn Sie das Nav ändern möchten bar, wenn Sie zum Ende scrollen verwenden Sie einfach etwas wie:

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

});

Quelle

2016-03-27 17:35:37

Problem, um eine feste klebrige Seitenleiste zu erstellen

Antwort

Verwandte Themen