javascript - 如何在页面滚动上粘贴元素

Question

我有一个单页滚动网站，包含 5 个主要部分，每个部分的标题栏都横跨其顶部。当您向下滚动该部分时，我希望每个标题栏都停留在顶部(好吧，相对顶部位于顶部粘性标题下方)。我可以让一个粘住，但我很难让它粘住，然后一旦下一节的标题栏到达粘性点，它就会消失。

我想不出另一种方法来将 HTML 或 CSS 与 jQuery if else 语句绑定(bind)以实现此目的。我在想我可以尝试让它在每个部分的 id 中工作，但我认为没有像“withinId”这样的 jQuery 选择器。

我正在发布我尝试过的最新 jQuery(我需要在这里工作的 5 个变量中只有 2 个)。我知道这是错误的，但我被严重困住了。这里有什么想法吗？非常感谢。

(缩写)HTML:

<div id="welcome">
 <div class="title-bar">
  <p>WELCOME</p>
 </div>
</div>

<div id="global">
 <div class="title-bar">
  <p>GLOBAL ENGAGEMENT</p>
 </div>
</div>

<div id="community">
 <div class="title-bar">
  <p>COMMUNITY</p>
 </div>
</div>

<div id="resources">
 <div class="title-bar">
  <p>RESOURCES</p>
 </div>
</div>

<div id="horizon">
 <div class="title-bar">
  <p>ON THE HORIZON</p>
 </div>
</div>

CSS:

.title-bar {
    padding: 5px;
    position: relative; 
}

.title-bar.sticky {
     position: fixed;
     top: 111px;
     width: 100%;
     z-index: 1040;
}

jQuery:

$(document).ready(function() {

    var welcomeTitle = $('#welcome .title-bar');
    var globalTitle = $('#global .title-bar');
    var communityTitle = $('#community .title-bar');
    var resourcesTitle = $('#resources .title-bar');
    var horizonTitle = $('#horizon .title-bar');

    var stickyOffset = $('#header').offset().top;

    if ($w.scrollTop() > stickyOffset + 225) {
        welcomeTitle.addClass('sticky');
        globalTitle.addClass('sticky');
    } else {
        welcomeTitle.removeClass('sticky');
        globalTitle.addClass('sticky');
    }

    if (welcomeTitle.hasClass('sticky') && globalTitle.hasClass('sticky')) {
        welcomeTitle.removeClass('sticky');
    } else {
        //
    }
});

Answer 1

jsBin demo

给你的“页面”一个 class="page" 并使用 JS 的 Element.getBoundingClientRect 监听它们的位置on:DOM Ready，窗口Load，窗口Scroll

$(function() { // DOM ready

  var $win  = $(window),
      $page = $(".page").each(function(){
        // Memorize their titles elements (performance boost)
        this._bar = $(this).find(".title-bar");
      });

  function fixpos() {
    $page.each(function(){
      var br = this.getBoundingClientRect();
      $(this._bar).toggleClass("sticky", br.top<0 && br.bottom>0);
    });
  }

  fixpos(); // on DOM ready
  $win.on("load scroll", fixpos); // and load + scroll

});

*{box-sizing: border-box;}
html, body{height:100%;}
body{margin:0;font:16px/1 sans-serif; color:#777;}


.page{
  position:relative;
  min-height:100vh;
}
.title-bar {
  position: absolute;
  top:0;
  width: 100%;
  background:#fff;
  box-shadow: 0 3px 4px rgba(0,0,0,0.3);
}
.title-bar.sticky {
  position: fixed;
}

#welcome  {background:#5fc;}
#global   {background:#f5c;}
#community{background:#cf5;}
#resources{background:#fc5;}
#horizon  {background:#5cf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="welcome" class="page">
  <div class="title-bar">
    <h2>WELCOME</h2>
  </div>
</div>

<div id="global" class="page">
  <div class="title-bar">
    <h2>GLOBAL ENGAGEMENT</h2>
  </div>
</div>

<div id="community" class="page">
  <div class="title-bar">
    <h2>COMMUNITY</h2>
  </div>
</div>

<div id="resources" class="page">
  <div class="title-bar">
    <h2>RESOURCES</h2>
  </div>
</div>

<div id="horizon" class="page">
  <div class="title-bar">
    <h2>ON THE HORIZON</h2>
  </div>
</div>

Design-wise > 向第一个容器元素(在您的 .page 内)添加 padding-top 以防止内容位于 title 元素下方(因为它从绝对/固定位置切换)。