小编典典

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

css

Instagram应用程序具有一个不错的粘性标头，可以将当前的标头推上新标头。我找到了一个很棒的教程，说明如何在Android平台上原生执行此操作，但我希望使用JavaScript和CSS来完成。

我能够让标题切换为新标题，但似乎找不到模仿Instagram的方式。任何帮助是极大的赞赏。

编辑： 当使用指出的注释中的Cj作为航路点滚动时，我能够使标题停留在页面顶部。链接至路标。我遇到的主要问题是获得instagram在其iPhone移动应用程序中使用的“推动”效果。我会链接到一个示例，但是我以前从未见过它。*
*编辑2：使用@Chris提供的部分代码笔，可以使标头粘贴。然后，我添加了.slideUp效果。我的问题现在是使.slideUp效果仅在到达下一个标头时发生。现在，效果会在滚动上激活。

这是代码：

(function() {
function stickyTitles(stickies) {
    this.load = function() {
        stickies.each(function(){
            var thisSticky = jQuery(this);
            jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);
        });
    }
    this.scroll = function() {      
        stickies.each(function(){           
            var thisSticky = jQuery(this),          
                pos = jQuery.data(thisSticky[0], 'pos');
            if (pos <= jQuery(window).scrollTop()) {
                thisSticky.addClass("fixed");
                // added this 
                 $(".followMeBar:parent").slideUp();

            } else {
                thisSticky.removeClass("fixed");
            }
        });         
    }
}
jQuery(document).ready(function(){
    var newStickies = new stickyTitles(jQuery(".followMeBar"));
    newStickies.load();
    jQuery(window).on("scroll", function() {
        newStickies.scroll();

    }); 
});

}）（）;

阅读 310

2020-05-16

共1个答案

小编典典

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

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

});


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

}

/* For aesthetics only */



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

<div class="followMeBar">D</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">E</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">F</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">G</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">H</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">I</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">J</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">K</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">L</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">M</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">N</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">O</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">P</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">Q</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">R</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">S</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">T</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">U</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">V</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">W</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">X</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">Y</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<div class="followMeBar">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;

}



/* For aesthetics only */

body {

  margin: 0;

  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

}


<div data-lorem="p">

  <span class="sticky">a</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">b</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">c</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">d</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">e</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">f</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">g</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

<div data-lorem="p">

  <span class="sticky">h</span>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

  <br>

</div>

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

2020-05-16