Создание липкой навигации

Question

Привет, я использую следующие jquery и css, чтобы навести мое навигационное меню на верхнюю часть прокрутки. Проблема в том, что мое навигационное меню находится под 100vh div. jQuery не принимает vh как меру высоты. Любые предложения о том, как сделать это vh?

$(function(){ 
 
     $(window).scroll(function() { 
 
      if ($(this).scrollTop() >= 290) { 
 
       $('nav.stickynav').addClass('stickytop'); 
 
      } 
 
      else { 
 
       $('nav.stickynav').removeClass('stickytop'); 
 
      } 
 
     }); 
 
    });

.stickynav.stickytop { 
 
     position:fixed; 
 
     top:0 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<header class="group"> 
 
    \t <img src="<?php echo get_bloginfo('template_directory');?>/img/es.png"> 
 
    \t <nav class="stickynav"><?php wp_nav_menu(array('theme_location' => 'primary')); ?></nav> 
 
    </header>

Answer 1

Yo можно использовать один из этих LIBS: https://github.com/jbutko/stickyNavbar.js или https://github.com/leafo/sticky-kit

Answer 2

Это код для заголовка наклейкой на моем сайте .. Надеюсь, что это помогает

$(function() { 
 
    /* Sticky Header */ 
 
    $(window).scroll(function(){ 
 
    var sticky = $('.header'), 
 
    scroll = $(window).scrollTop(); 
 
    if (scroll >= 100){ 
 
     sticky.addClass('fixed'); 
 
     sticky.fadeIn(); 
 
    } else { 
 
     sticky.removeClass('fixed'); 
 
     sticky.removeAttr("style"); 
 
    } 
 
    }); 
 
});

/* Header */ 
 

 
header.header { 
 
    background: #000; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
} 
 

 
header.header.fixed { 
 
    position: fixed; 
 
    width: 100%; 
 
    display:none; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 202; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header class="header"> 
 
    <div class="container"> 
 
    <nav class="main-menu" id="mm"> 
 
     <ul> 
 
     <li><a href="#" title="#">Home</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header>

Answer 3

css недавно введено положение: липкое; Я думаю, что это будет полезно для вашего сайта, так как вам не нужно использовать какой-либо javascript, чтобы заставить его работать. Но из-за того, насколько он новый, он не будет работать на всех браузерах и не работать с не обновленными браузерами (многие используют старые браузеры)