Багги jQuery Navbar Popout

Question

У меня есть одна из тех навигационных полосок, которые всплывают и остаются на столе, когда вы прокручиваете страницу, но проблема в том, когда u прокручивается от нее, находясь на странице, чтобы выскочить из остальной части переходов страницы немного.

Вот JQuery: (извините эхо-х)

echo "<script type='text/javascript'>"; 
    echo "$(function() {"; 
     // grab the initial top offset of the navigation 
     echo "var sticky_navigation_offset_top = $('#navbar_container').offset().top;"; 

     // the function that decides weather the navigation bar should have "fixed" css position or not. 
     echo "var sticky_navigation = function() {"; 
      echo "var scroll_top = $(window).scrollTop();"; // our current vertical position from the top 

      // if we've scrolled more than the navigation, change its position to fixed to stick to top, 
      // otherwise change it back to relative 
      echo "if (scroll_top > sticky_navigation_offset_top) {"; 
       echo "$('#navbar_container').css({ 'position': 'fixed', 'top':0, 'left':0 });"; 
      echo "} else {"; 
       echo "$('#navbar_container').css({ 'position': 'relative' });"; 
      echo "}"; 
     echo "};"; 

     // run our function on load 
     echo "sticky_navigation();"; 

     // and run it again every time you scroll 
     echo "$(window).scroll(function() {"; 
     echo "sticky_navigation();"; 
     echo "});"; 
    echo "});"; 
echo "</script>"; 

Если вы действительно медленно просто прокрутите немного вниз, чтобы сделать его выскочить и смотреть тело страницы прыгать немного, я пытаясь сделать так, чтобы это не произошло, так что это действительно гладко, как оно всплывает. (это случается, выскакивая и обратно).

Answer 1

Я думаю, это потому, что навигация имеет position: fixed; набор когда он прокручивается вниз, что означает, что он больше не встраивается в страницу, что означает, что вся страница теряет такую ​​высоту, что заставляет ее «вскакивать». (Надеюсь, что имеет смысл.)

Попробуйте изменить его на что-то вроде этого:

echo "if (scroll_top > sticky_navigation_offset_top) {"; 
    echo "$('#navbar_container').css({ 'position': 'fixed', 'top':0, 'left':0 });"; 
    echo "$('body').css({ 'margin-top': 45});"; 
echo "} else {"; 
    echo "$('#navbar_container').css({ 'position': 'relative' });"; 
    echo "$('body').css({ 'margin-top': 0});"; 
echo "}"; 

Answer 2

Поместите свой Navbar в другой контейнер - дать этому контейнеру фиксированную высоту, а затем он не будет выскочить больше

<div class="navbar_surrounding"> 
<div id="navbar_container" style="position: relative;"> 
... 
</div> 
</div> 

CSS

.navbar_surrounding { 
    display: block; 
    height: 45px; 
    width: 100%; 
} 

Answer 3

еще лучше, использование начальной загрузки, который будет обслуживать мобильные устройства тоже! Пример «Фиксированный топ» демонстрирует меню, которое постоянно остается на вершине!

Fixed Top example, Bootstrap