Приклеивающееся или прилипающее меню

Оригинал статьи смотреть здесь.

1) К нужному нам блоку меню приписываем id

<div id="stick_menu" ...>

2) В файл CSS пишем стиль

.to_top { 
    position: fixed;
    top: 0px;
    z-index: 1000;
    width: 100%;
}

3) Далее в файл JS пишем следующий код

$(document).ready(function() {
var start_pos = $('#stick_menu').offset().top;
 $(window).scroll(function(){
  if ($(window).scrollTop()>=start_pos) {
      if ($('#stick_menu').hasClass()==false) $('#stick_menu').addClass('to_top');
  }
  else $('#stick_menu').removeClass('to_top');
 });
});

4) И подключаем библиотеку jQuery.

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

Готово!

Posted: 21 января 2020
Ярослав Указов Проект-менеджер
Was this article helpful? Yes No

0 comments


    Add comment

    To add a comment please sign up or login