Сделать конкретный заголовок липким в зависимости от положения прокрутки пользователя на странице в Angular

Question

В Angular мне нужно сделать заголовок панели липким в зависимости от того, где на странице находится позиция прокрутки пользователя.

Я считаю, что есть два способа сделать то, чего я хочу достичь. Один из них с чистым CSS с использованием позиции: липкий. Вы можете увидеть мой закомментированный код CSS в app.component.css. Эта техника не имеет ничего общего с Angular и будет работать.

Другой способ, более совместимый с браузером, - это использование JavaScript, где я борюсь, используя Angular против простого html / css / js.

Использование Angular Я использую @HostListener для доступа к прокрутке окна. Это дает мне доступ к текущей позиции прокрутки окна. Я считаю, что это хорошая отправная точка.

Часть, которую я не могу понять, это как проверить положение каждого заголовка панели с помощью offsetTop (), и если позиция проверяемого заголовка панели меньше, чем позиция прокрутки, я хочу добавить класс закрепления, в противном случае удалите его.

Я точно знаю, что было бы немного проще, если бы я сделал панель компонентом самостоятельно. Однако в настоящее время это не вариант.

Пожалуйста, посмотрите, что у меня есть на данный момент:
https://stackblitz.com/edit/angular-b7pgrx

Answer 1

Заголовки Follow me - это то, что называется вашим желаемым признаком.

Крис Спиттлс (Chris Spittles) уже разработал хорошую рабочую ручку с кодом: https://codepen.io/chrissp26/pen/gBrdo

В случае, если ссылка однажды перестанет работать:

HTML:

<h1>Multiple Sticky Titles with CSS and JS</h1>
<section class="explanation">
  <p>On some mobile platforms there are lists that group items under multiple headings. As you scroll through the list, the current title or heading follows you until you reach the next one at which point the current one is pushed up and the new title or heading docks to the top. <br>This snippet emulates this functionality.</p>
  <p>
    I created this originally because of this
    <a href="http://stackoverflow.com/questions/13279725/getting-a-sticky-header-to-push-up-like-in-instagrams-iphone-app-using-css-a/13293684#13293684" target="_blank">question</a> on stack overflow.
  </p>

</section>

<div class="followMeBar">A</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">B</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">C</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

CSS:

.followMeBar {
  background: #e64a19;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
  color: #fff;
}

.followMeBar.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 0;
}

.followMeBar.fixed.absolute {
  position: absolute;
}


/* For aesthetics only ------------------------------------------------------------------*/

body {
  margin: 0;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

h1 {
  font: 200 1.2em "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
  font-weight: 200;
  color: #fff;
  background: #039be4;
  padding: 20px;
  margin: 0;
  border-bottom: 10px solid #ccc;
  strong {
    font-family: "Segoe UI Black";
    font-weight: normal;
  }
}

.explanation {
  padding: 20px;
  max-width: 600px;
  p {
    max-width: 300px;
    color: #fff;
    font-size: 0.8rem;
  }
}

JavaScript:

var stickyHeaders = (function() {

  var $window = $(window),
      $stickies;

  var load = function(stickies) {

    if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {

      $stickies = stickies.each(function() {

        var $thisSticky = $(this).wrap('<div class="followWrap" />');

        $thisSticky
            .data('originalPosition', $thisSticky.offset().top)
            .data('originalHeight', $thisSticky.outerHeight())
              .parent()
              .height($thisSticky.outerHeight());             
      });

      $window.off("scroll.stickies").on("scroll.stickies", function() {
          _whenScrolling();     
      });
    }
  };

  var _whenScrolling = function() {

    $stickies.each(function(i) {            

      var $thisSticky = $(this),
          $stickyPosition = $thisSticky.data('originalPosition');

      if ($stickyPosition <= $window.scrollTop()) {        

        var $nextSticky = $stickies.eq(i + 1),
            $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');

        $thisSticky.addClass("fixed");

        if ($nextSticky.length > 0 && $thisSticky.offset().top >= $nextStickyPosition) {

          $thisSticky.addClass("absolute").css("top", $nextStickyPosition);
        }

      } else {

        var $prevSticky = $stickies.eq(i - 1);

        $thisSticky.removeClass("fixed");

        if ($prevSticky.length > 0 && $window.scrollTop() <= $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight')) {

          $prevSticky.removeClass("absolute").removeAttr("style");
        }
      }
    });
  };

  return {
    load: load
  };
})();

$(function() {
  stickyHeaders.load($(".followMeBar"));
});