фиксированная навигация после полноэкранного заголовка

Question

У меня есть полноэкранный заголовок на одностраничном веб-сайте. После элемента hero есть мой навигационный элемент, который следует фиксировать после прокрутки по всей высоте экрана. Вот что у меня есть.

HTML:

<div id="hero"> 
    <div class="welcome"> 
     <img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" alt="Logo"/> 
    </div> 
    <a href="http://localhost/elephant/#inner-header"><img class="arrow" src="<?php echo get_template_directory_uri(); ?>/library/images/arrow.png" alt="Weiter"/></a> 
</div> 

<nav class="nav"> (...) </nav> 

CSS:

#hero { 
    background-image:url(../images/hero.jpg); 
    background-size:cover; 
    position:relative; 
    height:100vh; 
} 

JavaScript:

$(function() { 
/* $(".navbar-fixed-top").css({"top":$("#hero").height()}); 

    $(window).resize(function (e) { 
    $(".navbar-fixed-top").css({"top":$("#hero").height()}); 
    }); */ 

$(document).on('scroll', function(){ 
    console.log('scroll top : ' + $(window).scrollTop()); 
     if($(window).scrollTop()>=$("#hero").height()) 
     { 
      $(".nav").addClass("navbar-fixed-top"); 
     } 

     if($(window).scrollTop()<$("#hero").height()) 
     { 
      $(".nav").removeClass("navbar-fixed-top"); 
     } 
    }); 
}); 

Вы можете увидеть, где я допустил ошибку?

Answer 1

Если я правильно понимаю, вы пытаетесь заставить элемент навигации оставаться неподвижным в верхней части экрана при прокрутке вниз. Я думаю, что первое, что нужно попробовать, это «позиция: липкая» в элементе nav и посмотреть, работает ли это?

Answer 2

Похоже, что ваш javascript работает нормально. Я создал Fiddle, который, кажется, работает отлично. Все, что я добавил был некоторый CSS вот так:

.nav.navbar-fixed-top { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

Взгляните на скрипку и дайте мне знать, если это то, что вы ищете.

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