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

Question

我有一个页面，滚动网站有5个主要部分，标题栏横跨每个相应部分的顶部。当你向下滚动部分时，我希望每个标题栏都粘在顶部（好吧，相对顶部 - 顶部粘性标题下面）。我可以得到一个坚持，但我很难做到这一点，一个坚持，然后它会消失，一旦下一部分的标题栏到达粘性点。

我无法找到另一种方法来将HTML或CSS与jQuery if else语句绑定以使其工作。我以为我可以尝试让它在每个部分都有效。但我不认为那里有{＆＃34; withinId＆＃34; 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

提供您的＆＃34;页面＆＃34; a class="page"并使用JS Element.getBoundingClientRect来监听他们的位置：DOM 就绪，窗口加载，窗口滚动< /强>

＆＃13;

＆＃13;

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

});

＆＃13;

*{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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

设计明智＆gt;在第一个容器元素（在.page中）添加一个padding-top，以防止内容位于title元素下面（因为它从绝对/固定位置切换）。

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>