像“使用CSS和jQuery在Instagram的iPhone应用程序中”那样获得“抬起头”的粘性标头

像“使用CSS和jQuery在Instagram的iPhone应用程序中”那样获得“抬起头”的粘性标头

对此没有一个快速或简单的答案，但是通过一些创造性的哄骗，我们可以模拟相同的功能。

我们需要的是一系列可以识别，循环然后设置的元素，以便当我们在页面上达到它们的位置时，上一项会被推高，而新项将变得固定。我们将需要使用jQuery的

offset().top

方法检索元素的初始位置，并将其存储在

data

标签中，以便稍后使用。然后，其余部分将在我们滚动时进行计算。

这应该可以解决问题：

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  />');        $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"));});.followMeBar {  background: #999;  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;}body {  margin: 0;  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div >A</div><br><br><br><br><br><br><br><br><br><br><div >B</div><br><br><br><br><br><br><br><br><br><br><div >C</div><br><br><br><br><br><br><br><br><br><br><div >D</div><br><br><br><br><br><br><br><br><br><br><div >E</div><br><br><br><br><br><br><br><br><br><br><div >F</div><br><br><br><br><br><br><br><br><br><br><div >G</div><br><br><br><br><br><br><br><br><br><br><div >H</div><br><br><br><br><br><br><br><br><br><br><div >I</div><br><br><br><br><br><br><br><br><br><br><div >J</div><br><br><br><br><br><br><br><br><br><br><div >K</div><br><br><br><br><br><br><br><br><br><br><div >L</div><br><br><br><br><br><br><br><br><br><br><div >M</div><br><br><br><br><br><br><br><br><br><br><div >N</div><br><br><br><br><br><br><br><br><br><br><div >O</div><br><br><br><br><br><br><br><br><br><br><div >P</div><br><br><br><br><br><br><br><br><br><br><div >Q</div><br><br><br><br><br><br><br><br><br><br><div >R</div><br><br><br><br><br><br><br><br><br><br><div >S</div><br><br><br><br><br><br><br><br><br><br><div >T</div><br><br><br><br><br><br><br><br><br><br><div >U</div><br><br><br><br><br><br><br><br><br><br><div >V</div><br><br><br><br><br><br><br><br><br><br><div >W</div><br><br><br><br><br><br><br><br><br><br><div >X</div><br><br><br><br><br><br><br><br><br><br><div >Y</div><br><br><br><br><br><br><br><br><br><br><div >Z</div><br><br><br><br><br><br><br><br><br><br>

这是仅CSS版本：

在您说“什么？！只有CSS版本的时候，我刚刚经历了所有这些事情！！” 它仅适用于几种浏览器。 例如，在firefox中尝试以下 *** 作：

.sticky {  position: -webkit-sticky;  position: -moz-sticky;  position: -o-sticky;  position: -ms-sticky;  position: sticky;  top: 0;  left: 0;  right: 0;  display: block;  z-index: 1;  background: #999;  color: #fff;  padding: 10px 20px;}body {  margin: 0;  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}<div data-lorem="p">  <span >a</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >b</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >c</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >d</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >e</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >f</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >g</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div><div data-lorem="p">  <span >h</span>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br>  <br></div>

http://caniuse.com/#feat=css-sticky