There is a header that is located above the navigation menu. It is necessary to make so that the navigation when scrolling and passing through the header attached navigation block, which is naturally located below the header. The code seems to be under this implementation. There are a lot of options for its implementation with other plugins and just using js and css. In this case, I just need to attach it. The code is as follows:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(document).scroll (function() { if ($(document).scrollTop() > $('header').height () + 10) $('nav').addClass ('fixed'); else $('nav').removeClass ('fixed'); )}; </script>

Perhaps the script needs to be inserted next to the <meta> , but I don’t think this is the problem. I can also give more markup, but I do not think this is the problem. If there is such a question, I can quote in the comments. And also the class is added to this, but this is also not so important the main thing that the script worked:

 .fixed{ position: fixed; top: 0; opacity: 0.97; }
  • How much I mess with this question so far I can not understand why the class is not added. I tried to change the jquery version on the advice, but to no avail. The script did not work, and does not work. - Alexander Alexander
  • For you have an error here: ...ss ('fixed') )}; . It is necessary }); , not )}; . And so, your example is quite working. - entithat

1 answer 1

The scroll is not in the document ( document ), and the window ( window ).
Here is a working version)

 $(window).bind('scroll',function(){// Используем обработчик по скроллу var ScrollPos = $(this).scrollTop(), // Определяем позицию скролла HeaderHeight = $('.header').height(); // Определяем высоту шапки if(ScrollPos>HeaderHeight) { // Если позиция скролла больше высоты шапки, т.е. ниже шапки, то.. $('.menu').addClass('fixed'); // Добавляем класс для меню // Фикс, т.к. контент уходит выше, ибо менюшка "ушла" $('.content').css('margin-top','50px'); //Высота меню } else { // Если меньше, то $('.menu').removeClass('fixed'); // Удаляем класс у меню $('.content').css('margin-top','0'); // удаляем фикс } }); 
 body { margin: 0; } .header { height: 100px; background: #666; } .menu { height: 50px; background: #333; color: #fff; } .menu.fixed { position: fixed; left: 0; top: 0; right: 0; } .content { height: 1000px; background: #999; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="header">Хеадер</div> <div class="menu">Меню</div> <div class="content">Контент</div>

  • Thanks, now I will try to implement it. I have been busy for two days already and I thought that such scripts would still need to be done several for a full-fledged working, beautiful version, you need to also reduce the text in the div and probably also reduce the block when scrolling, just like on the website transparency.org for example. But this I will already mess around further, in general, thanks. - Alexander Alexander
  • It is interesting in principle whether the use of the div block in the form of a container, because where I will not look, I implement it with the help of the header and nav blocks - Alexander Alexander
  • @AlexanderAleksand, <nav></nav> seems to help search engines, but this is not certain. Everywhere the menu is implemented in different ways, somewhere in the old-fashioned <li></li> . - CbIPoK2513
  • Maybe I haven’t figured out the server yet, but people seem to write that it isn’t needed, I mean when developing. I always checked the work of javascript only on the server, I will probably have to connect it and link the site, along with the database. I just connected html and css. It seems everything works and in execution it works, I just have a more complex layout, I probably amused. Something doesn’t agree again ... Let us see in general, the question is settled in any case, thank you ... - Alexander Alexander