Создать плавный переход с липким заголовком с помощью CSS - PullRequest
Новая
       9

Создать плавный переход с липким заголовком с помощью CSS

0 голосов
/ 01 июля 2018

Я создал липкий заголовок для своей страницы: 

$(document).ready(() => {
  initNavbarScroll();
});

function initNavbarScroll() {
  const navbar = $("#navbar");
  const navbarTopOffset = navbar.offset().top;
  const stickedCls = "navbarSticked";

  $(window).scroll(() => {
    const isSticked = navbar.hasClass(stickedCls);
    const windowScrolledDown = $(window).scrollTop() > navbarTopOffset;

    if (windowScrolledDown) {
      if (!isSticked) {
        navbar.addClass(stickedCls);
      }
    } else {
      if (isSticked) {
        navbar.removeClass(stickedCls);
      }
    }
  });
}
body {
  margin: 0;
}

#navbar {
  height: 60px;
  width: 100%;
  background: blue;
}

.navbarSticked {
  position: fixed;
  top: 0;
}

.box {
  height: 100px;
  border-bottom: 1px solid;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="navbar"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Заголовок должен быть таким же, как на этой странице .

Как вы можете видеть в примере кода выше, переход заголовка не плавный, он немного неуклюжий.

Как мне сделать так, чтобы он плавно прилипал?

1 Ответ

0 голосов
/ 01 июля 2018

Вы можете попробовать использовать css position:sticky; вместо position:fixed

https://css -tricks.com / положение липкий-2 /

...