Javascript 根据用户的不同，使特定标题保持粘性'；s在页面上以角度滚动的位置

在Angular中，我需要根据用户在页面上的滚动位置使面板标题保持粘性

我相信有两种方法可以实现我的目标。其中一个是使用position:sticky的纯css。你可以在app.component.css中看到我注释掉的css代码。这项技术与角度无关，可以工作

另一种更符合浏览器的方式是使用JavaScript，这正是我在努力使用Angular和plain html/css/js的地方

使用Angular我正在使用@HostListener访问窗口滚动条。这使我可以访问当前窗口滚动位置。我相信这是一个很好的起点

我无法理解的部分是如何使用offsetTop（）检查每个面板标题的位置，如果要检查的面板标题的位置小于我要添加sticky类的滚动位置，否则将其删除

我知道事实上，如果我将面板作为自己的组件，这将更容易一些。然而，这目前不是一个选项

请查看我目前的内容：

---

跟从我的标题-这就是您想要的功能的名称

Chris Spitles已经有了一支很好的代码笔：

如果链接有一天将停止工作：

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>

.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;
  }
}

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"));
});

JavaScript:

<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>

.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;
  }
}

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"));
});

var stickyHeaders=（函数（）{
变量$window=$（window），
$stickies；
var负载=功能（胶粘物）{
if（typeof stickies===“object”&&stickies实例jQuery&&stickies.length>0）{
$stickies=stickies.each（函数（）{
var$thisticky=$（this.wrap（“”）；
$thisticky
.data（'originalPosition'，$thisticky.offset（）.top）
.data（'originalHeight'，$thisticky.outerHeight（））
.parent（）
.height（$thisticky.outerHeight（））；
});
$window.off（“scroll.stickies”）.on（“scroll.stickies”，function（））{
_当滚动时（）；
});
}
};
var_whenScrolling=函数（）{
$stickies.每个（函数（i）{
变量$thisticky=$（此），
$stickyPosition=$ThistSticky.data（'originalPosition'）；
如果（$stickyPosition 0&&$ThistSticky.offset（）.top>=$nextStickyPosition）{
$thiststicky.addClass（“绝对”）.css（“顶部”，$nextStickyPosition）；
}
}否则{
var$prevstick=$stickies.eq（i-1）；
$thisticky.removeClass（“固定”）；
如果（$prevSticky.length>0&&$window.scrollTop（）Megajin谢谢，我不知道followme标题是该功能的名称。这将有助于我做进一步的研究。但是，我的问题是如何在没有jQuery的情况下以Angular方式完成。在我发布的stackblitz中，我已经不远了。