Nav не фиксирован в верхней части страницы после прокрутки?

Question

Я пытаюсь получить скрипт для работы, который зафиксирует элемент nav в верхней части страницы при прокрутке страницы до тега nav. Однако что он делает сейчас, это то, что начинается фиксация в верхней части страницы только тогда, когда вы прокручиваете половину страницы за прошлым знаком Nav? Вы можете просмотреть страницу в вопросе here

Script

<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

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

Answer 1

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

Эта линия не будет исправить вашу СЧА к вершине, как и следовало ожидать. Он просто получает высоту окна и вычитает его на 25.

Сначала необходимо получить значение nav бара offsetTop, чтобы проверить, если значение окна scrollTop достигает offsetTop в nav баре.

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

Надеюсь, это поможет!

Answer 2

Вы можете видеть, что навигатор на вашем сайте фиксируется, если вы прокрутите страницу вниз. так что если вы хотите, чтобы быть исправлен как только NavBar свитки, выполненными из окна просмотра, вы можете попробовать следующий код:

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

$('nav').offset().top; получает верхнюю позицию навигационной панели относительно верхней позиции документа. Поэтому, когда вы прокручиваете больше этого значения, к нему добавляется класс fixed.

Также я бы рекомендовал вам изменить свойство css класса fixed. вы должны держать его следующим образом:

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

Вы должны установить ширину (88% в случае вашего NavBar), чтобы фиксированных расположенных элементов, position:fixed принимает ширину в соответствии с содержанием DIV, а не по всей ширине.