Nav nicht am Seitenanfang nach dem Scrollen fixiert?

Question

Ich versuche, ein Skript zu arbeiten, das das Navigationselement am oberen Rand der Seite repariert, wenn Sie die Seite bis zum Nav-Tag scrollen. Was es aber jetzt macht, ist, dass das Fixieren am oberen Rand der Seite nur dann beginnt, wenn Sie die Hälfte der Seite weit nach dem Nav-Tag gescrollt haben? Sie können

<script> 
$(document).ready(function(){ 
$(window).bind('scroll', function() { 
var navHeight = $(window).height() - 25; 
if ($(window).scrollTop() > navHeight) { 
$('nav').addClass('fixed'); 
} 
else { 
$('nav').removeClass('fixed'); 
} 
}); 
}); 
</script> 

HTML

<nav id="nav_desktop"> 

<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="#dt">Downtown Tour</a></li> 
    <li><a href="#gt">Growth Tour</a></li> 
    <li><a href="#lt">Landmarks Tour</a></li> 
    <li><a href="#ct">Contact</a></li> 
</ul> 

CSS

die Seite in Frage here

Script ansehen

.fixed { position: fixed; top: 0; height: 25px; z-index: 1; } 

Answer 1

var navHeight = $(window).height() - 25;

Diese Linie wird Ihre nav an die Spitze nicht beheben, wie man erwarten würde. Es wird nur die Fensterhöhe und subtrahiert es von 25.

Sie müssen zuerst den offsetTop Wert der nav bar erhalten zu prüfen, ob der scrollTop Wert des Fensters die offsetTop der nav bar erreicht.

<script> 
    $(document).ready(function(){ 
     var navTop = $('.nav').position().top; // returns and assigns the offset top of the nav bar 

     $(window).bind('scroll', function() { 
      if($(window).scrollTop() >= navTop) { // condition met if the scroll top value is greater than or equal to the offset top of the nav bar 
       $('nav').addClass('fixed'); 
      } 
      else if($(window).scrollTop() < navTop) { //condition met if the scroll top value is only lower than the offset top of the nav bar 
       $('nav').removeClass('fixed'); 
      } 
     }); 
    }); 
</script> 

Ich hoffe, es hilft!

Answer 2

Sie können sehen, dass die Navigationsleiste in Ihrer Site repariert wird, wenn Sie unten auf der Seite nach unten scrollen. so, wenn Sie es werden möchten, aus Ansichtsfenster, sobald die navbar Rollen festgelegt Sie den folgenden Code versuchen:

<script> 
    $(document).ready(function(){ 
     var navHeight = $('nav').offset().top; 
     $(window).bind('scroll', function() { 
      if ($(window).scrollTop() > navHeight) { 
       $('nav').addClass('fixed'); 
      } 
      else { 
       $('nav').removeClass('fixed'); 
      } 
     }); 
    }); 
</script> 

Die $('nav').offset().top; wird die Spitzenposition des navbar in Bezug auf die Spitzenposition des Dokuments. Wenn Sie also mehr als diesen Wert scrollen, wird die Klasse fixed hinzugefügt.

Auch ich würde Ihnen empfehlen, einige CSS-Eigenschaft der fixed Klasse zu ändern. Sie sollten es halten wie folgt:

.fixed { 
    position: fixed; 
    top: 0; 
    width: 88%; 
    height: 25px; 
    z-index: 1; 
} 

Sie haben Breite (88% im Falle Ihrer navbar ist) so einzustellen, dass die Elemente fixiert positioniert als position:fixed die Breite nimmt nach dem Inhalt des div und nicht die volle Breite.