Как удалить липкий класс, когда div возвращается в исходную точку - PullRequest
Новая
       5

Как удалить липкий класс, когда div возвращается в исходную точку

0 голосов
/ 03 февраля 2019

У меня есть две панели навигации, вторая становится липкой, как только она попадает на верхнюю часть окна просмотра, проблема, которую я имею, заключается в том, чтобы заставить ее «открепиться», когда элемент div, содержащий исходную панель навигации, возвращается в область просмотратак что первый navbar можно увидеть снова.

Извините за ужасное объяснение и смутное название, с трудом пытался понять, как его описать.

Вот jsfiddle что даст вам гораздо лучшее представление о том, что я имею в виду, любая помощь будет признательна, поскольку я довольно беден, когда дело доходит до javascript, спасибо.

(HTML и CSS в jfiddle) 

  $('#nav2').attr("attop", false);
  var lastScrollTop = 0;
  $(window).on('scroll', function() {
    var windowScrollTop = $(this).scrollTop();


    if (windowScrollTop > lastScrollTop) {
      var header = $('#nav2[attop="false"]:first');
      if (header && header.length > 0) {
        if (windowScrollTop >= header.offset().top) {
          header.attr('attop', true);
          $('#nav2').addClass('sticky');
        }
      }

    }

    lastScrollTop = windowScrollTop;

  });
});
````

1 Ответ

0 голосов
/ 03 февраля 2019

В Bootstrap 4 есть отличное решение, и я использую его на нескольких сайтах.Единственное, что вам нужно сделать, это добавить этот класс в панель навигации.Посмотрите приведенный ниже фрагмент кода.

Обратите внимание, что для корректной работы позиции sticky этот класс не может быть добавлен к элементу внутри контейнера, вы должны добавить этот класс в сам контейнер. 

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

/*DEMO PURPOSE*/
nav{background:red;padding-top:1rem;padding-bottom:1rem}
.section-1{height:300px}
.section-2{height:1000px}
<div class="section-1">Section 1</div>
<nav class="sticky-top">Lorem Ipsum</nav>
<div class="section-2">Section 1</div>
...