1

Есть такой код.

<section class="header">
           Шапка
        </section>

        <!--//шапка-->

        <!--***МЕНЮ***-->

        <section class="main-menu">
            Меню
        </section>

При пролистовании вниз, как сделать так что бы закреплялся в верху страницы?

1
  • Как пример position:fixed на блок меню. Еще полезно придать ему z-index побольше, чтобы новые элементы не налезали на шапку. Если меню не "прилипает" к потолку - используйте top:0px.
    – alexoander
    11 янв 2017 в 11:37

3 ответа 3

1

Самый простой вариант, как-то так:

$(window).on('scroll', function(e) {
  var $header = $('.header'),
      $menu = $('.main-menu'),
      scroll = $(this).scrollTop();
  
  if (scroll >= $header.height()) {
    $menu.addClass('fixed');
  } else {
    $menu.removeClass('fixed');
  }
});
body {
  height: 1000px;
}

.header {
  background: #eee;
  height: 80px;
}

.main-menu {
  width: 100%;
  height: 30px;
  background: #f00;
}

.main-menu.fixed {
  position: fixed;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="header">
  Шапка
</section>

<!--//шапка-->

<!--***МЕНЮ***-->

<section class="main-menu">
  Меню
</section>

1

position:fixed на блок меню/шапку. Еще полезно придать ему z-index побольше, чтобы новые элементы не налезали на шапку. Если меню не "прилипает" к потолку - используйте top:0px. т.е.

.header 
{
   position:fixed;
   top:0px;
   z-index:9999;
}
0

Не советую использовать position:fixed, потому что он вырывает блок из документа и придется возиться с отступами или подложками, чтобы контент не залезал под шапку.

Испльзуйте position: sticky вместе с top:0. Это "приклеит" шапку к верху экрана и при скролле она останется на верху. И, при этом, не придется следующему элементу (на каждой странице) задавать margin/padding или писать js код или делать подложку (моветон).

НО! Чтобы навигация не "спряталась" под шапку, их стоит вместе поместить в обертку! Либо, если у Вас другие планы на обертку и высота шапки неизменно статична и равна N px, то просто примените стили к header и к меню, задав стилям меню параметр top: N px; .

Так же, соблюдайте семантику при верстке. Внутри тега section ОБЯЗАТЕЛЬНО должен быть заголовок (теги h1-h6), потому что они обрабатываются поисковиками для выдачи в поиске.

А меню, содержащее навигационные ссылки, должно быть внутри тега nav.

Поэтому, предлагаю Вам использовать данную разметку:

.heading-wrapper {
position: sticky;
top:0;
z-index: 9999;
}
<body>
<div class="heading-wrapper">
  <header>
<!-- Содержимое шапки -->
    <h1>Logo</h1>
  </header>
  <nav>
<!-- Содержимое меню -->
    <a>link</a>
    <a>link</a>
    <a>link</a>
  </nav>
</div>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.