Я не могу настроить фиксированное положение

Question

Я хочу, когда пользователь спускается вниз по странице, фиксируется положение навигационной панели. Я меняю позицию jquery или css, но проблема в том, что.

Первая версия на сайте:

Когда пользователь спуски вниз страницы:

Я хочу устремлены на верхней части страницы. Спасибо за помощь.

nav css: ` 
img#logo {width:auto;height:72px; position:absolute;margin-left:90px; } 
div#nav {width:1930px;height:72px;border:2px solid #333;} 
div#nav ul { list-style-type:none; } 
div#nav ul li {float:left;} 
div#nav ul#menu1 li a {font:20px Arial, Helvetica, sans-serif; padding:160px; color:#333;line-height:72px;} 
div#nav ul#menu2 li a {font:20px Arial, Helvetica, sans-serif;padding:160px;margin-left:160px; color:#333; line-height:72px;}` 

JQuery:

$(window).scroll(function(e) 
    { 
     var location = $(window).scrollTop(); 
     if(location>=$('div#nav').offset().top) 
     { 
      $('div#nav').css({'position':'fixed'}); 
     } 
    }); 

Answer 1

Мне нравится использовать https://fixedposition.googlecode.com/files/jquery.fixedposition.1.0.0-min.js для этой цели, потому что это работает легко и хорошо.

Первый включает файл в .js в заголовке вашего сайта, а затем использовать код followig:

<script> 
     $(document).scroll(function(){ 
      if(!$('.navbar').length) return; 

      if (!$('.navbar').attr('data-top')) { 

       // If already fixed, then do nothing 
       if ($('.navbar').hasClass('navbar-fixed')) return; 

       // Remember top position 
       var offset = $('.navbar').offset(); 

       $('.navbar').attr('data-top', offset.top); 
      } 


      if ($('.navbar').attr('data-top') <= $(this).scrollTop()) { 
       $('body').addClass('subnav-active'); 
       $('.navbar').addClass('navbar-fixed'); 
       $('#navbarStyleHolder').css("display", "block"); 
      } 

      else { 
       $('body').removeClass('subnav-active'); 
       $('.navbar').removeClass('navbar-fixed'); 
       $('#navbarStyleHoler').css("display", "none"); 
      } 
     }); 
    </script> 

Следующая просто идти вперед и заменить .navbar с DIV, в котором ваш нав находится, а затем создайте класс .css с форматированием вашего фиксированного заголовка (в моем примере код .navbar-fixed).

Этот сценарий автоматически заменит класс .navbar классом .navbar-fixed, когда достигнет конца деления .navbar.

Например, если вы хотите иметь его в верхней части экрана, используйте этот CSS код:

.navbar-fixed { 
position:fixed; 
top:1; 
}