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

Question

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

我想不出另一种方法将 HTML 或 CSS 与 jQuery if else 语句绑定以使其工作。我在想我可以尝试让它在每个部分的 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 监听它们的位置：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>

设计方面 > 为第一个容器元素（在您的 .page 内）添加一个 padding-top，以防止内容进入标题元素下方（因为它从绝对/固定位置切换）。

Answer 2

看看Waypoints plugin。

Answer 3

您可以通过为每个部分分配一个类，然后使用 jquery 每个函数从每个部分中添加和删除该类，从而使自己更轻松一些。

尝试以下方法：

$(window).on( "scroll", function() {
    $( ".section" ).each(function() {
        if ( $(window).scrollTop() >= $(this).offset().top - 50 ) {
            $( this ).addClass("sticky");
        }else{
            $( this ).removeClass("sticky");
        }
    });
});

然后你的 CSS

.section{
  height: 200px;
  background: #333;
  border:1px solid #222;
  position:relative;
}
.section .title-bar{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50px;
}
.section.sticky .title-bar {
  position:fixed;
}

还有html

<div class="section">
     <div class="title-bar"></div>
</div>
<div class="section">
     <div class="title-bar"></div>
</div>
<div class="section">
     <div class="title-bar"></div>
</div>