获取一个棘手的头在Instagram的的iPhone应用程序使用CSS和jQuery来“推”，像(G

2019-06-19 01:19发布

站内文章 / 前沿技术
22 0 0

在Instagram的应用程序有一个将当前一上来代替新的漂亮的粘头。 我发现了如何为Android做这本身有很大的教程，但我正在寻找使用JavaScript和CSS来做到这一点。

我能得到我的头转出了一个新的，但我似乎无法找到一个方法来模仿Instagram的做它的方式。 任何帮助是极大的赞赏。

* 编辑：我能得到头使用航点作为CJ在评论中指出滚动时粘到页面顶部。 （ 连结路点 ）。 我遇到的主要问题是如何说的Instagram在iPhone移动应用使用“推升”的效果。 我会链接到一个例子，但我从来没有见过它之前使用。 *

*编辑2：使用@克里斯提供我能得到头粘codepen的部分。 然后我添加了一个.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();

    }); 
});

}）（）;

Answer 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



Answer 2:

首先，感谢@克里斯Spittles为他的出色答卷。

我已经创建了一个修改的版本，从而不再需要将包装每个粘元件的，因为它简单地改变它们的相对位置，而不是使用固定的定位。 

var stickyHeaders = (function() {

    var $stickies;

    var load = function(stickies, target) {

        if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {

            $stickies = stickies.each(function() {

                var $thisSticky = $(this);

                $thisSticky
                    .data('originalPosition', $thisSticky.offset().top)
                    .data('originalHeight', $thisSticky.outerHeight());               
            });

            target.off("scroll.stickies").on("scroll.stickies", function(event) {
                 _whenScrolling(event);     
            });
        }
    };

    var _whenScrolling = function(event) {

        var $scrollTop = $(event.currentTarget).scrollTop();

        $stickies.each(function(i) {            

            var $thisSticky = $(this),
                $stickyPosition = $thisSticky.data('originalPosition'),
                $newPosition,
                $nextSticky;

            if ($stickyPosition <= $scrollTop) {

                $newPosition = Math.max(0, $scrollTop - $stickyPosition);
                $nextSticky = $stickies.eq(i + 1);

                if($nextSticky.length > 0) {

                    $newPosition = Math.min($newPosition, ($nextSticky.data('originalPosition') -  $stickyPosition) - $thisSticky.data('originalHeight'));
                }

            } else {

                $newPosition = 0;
            }

            $thisSticky.css('transform', 'translateY(' + $newPosition + 'px)');

            //could just as easily use top instead of transform
            //$thisSticky.css('top', $newPosition + 'px');
        });
    };

    return {
        load: load
    };
})();

$(function() {
    stickyHeaders.load($(".followMeBar"), $(window));
});

CSS中简化为： 

.followMeBar {
    background: #999;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
}

/* For aesthetics only */

body {
    margin: 0;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}

http://plnkr.co/edit/wk3h40LfBdN1UFtDLZgY?p=preview

而这里的显示使用固定头时如何有一个抵消另一个例子：

http://plnkr.co/edit/8YBqdCIKruVKYRXbZnCp?p=preview



Answer 3:

我想上面提供的解决方案，但没有人（上滚动和浏览器的兼容性主要缺陷）完美的工作没有错误。 刚刚发现这一个https://github.com/sarahdayan/feedify ，它的工作为我好。



Answer 4:

我遇到了麻烦克里斯的答案，准确地为我工作，因为所有的胶粘物是一个相对定位的div内（这一切之上的头，相对DIV以外） - 这个问题的答案仅仅是存储.offset（）在VAR的相对容器的div赛拓朴和从在脚本中的CSS（“顶部”， 值 ）中减去它。 正如克里斯的版本，前值推离其正常工作文档的顶部。 当您在相对DIV添加，顶部从现在那不是顶部推动，因此相对格上方的任何空间，包括在这是，你不会想要的东西的价值。 希望这可以帮助别人。 詹姆士



Answer 5:

该解决方案的基本版本：

CSS 

.sectionWrapper{
    background-color: #1E1E1E;
    padding: 10px 20px;
    color: #FF7B05;
    width: 100%
    height: 45px;
    min-height: 45px;

    margin-top: 30px;   
    position: relative;
    z-index: 10;
}
.sectionHeader{
}
.sectionEmbed {
}
.sectionFixed {
    background-color: #1E1E1E;
    padding: 10px 20px;
    color: #FF7B05;
    width: 100%;
    height: 45px;

    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
}

HTML 

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sectionWrapper sectionEmbed">
    <div class="sectionHeader">Headers here</div>
</div>

JQuery的

//check doc is ready
$(function() {
    $(window).on("scroll.sectionWrapper", function() {
        stickSections();
    });
});

//function stickSection
function stickSections()
{
    //detach the listener
    $(window).off("scroll.sectionWrapper");

    $scrollPos = $(window).scrollTop();
    $currentSticky = null;

    $('.sectionWrapper').each(function(){

        $(this).children().removeClass('sectionFixed');     

        if($scrollPos >= ($(this).offset().top - ($(this).height() - $(this).children().height() - 6)) ){
            $currentSticky = $(this);
        }
        else $(this).children().addClass('sectionEmbed');
    });

    //apply the fixed class to our scrollPos match
    if($currentSticky) $currentSticky.children().addClass('sectionFixed');

    //reattach the listener
    $(window).on("scroll.sectionWrapper", function() {
        stickSections();        
    });
}

例

https://codepen.io/ZombiesByte/pen/EyYwVO

玩得开心 ：）



Answer 6:

这并不总是有效的，如果有与粘头股利以上内容： $thisSticky.css('transform', 'translateY(' + $newPosition+ 'px)');

但此行的伎俩//could just as easily use top instead of transform $thisSticky.css('top', $newPosition+ 'px');



Answer 7:

该解决方案提供了@克里斯 - spittles帮了我很多，但我也想提供一个香草JavaScript解决方案。 此外，我添加了处理，最后粘的，你不希望它继续是固定的过去，它的内容区域情况的功能。

https://codepen.io/jamigibbs/pen/QZWjBy 

const StickySubsections = (function(){
  let el

  return {
    elements: function () {
      return {
        stickies: [...document.querySelectorAll('.followMeBar')]
      }
    },

    init: function () {
      el = this.elements()
      this.load()
    },

    load: function () {
      this.setupStickyWrap()
      window.addEventListener('scroll', () => this.whenScrolling())
    },

    setupStickyWrap: function(){
      el.stickies.forEach((sticky, i) => {
        const stickyWrap = this.addWrap(sticky, 'sticky-wrap')
        const heightToTop = sticky.getBoundingClientRect().top + window.scrollY
        const outerHeight = sticky.offsetHeight

        stickyWrap.parentElement.id = `sticky-content-${i}`
        sticky.setAttribute('data-originalPosition', heightToTop)
        sticky.setAttribute('data-originalHeight', outerHeight)

        stickyWrap.style.height = outerHeight + 'px'
      })
    },

    addWrap: function(el, className, wrap = 'div') {
      const wrapper = document.createElement(wrap)
      wrapper.classList.add(className)
      el.parentNode.insertBefore(wrapper, el)
      wrapper.appendChild(el)
      return wrapper
    },

    elementExists: function(el){
      return typeof(el) != 'undefined' && el != null
    },

    stickyPosition: function(el){
      return el.getAttribute('data-originalPosition')
    },

    nextStickyPosition: function(current, next){
      return next.getAttribute('data-originalPosition') - current.getAttribute('data-originalHeight')
    },

    scrollingPositionTop: function(el){
      return el.getBoundingClientRect().top + window.scrollY
    },

    offsetTop: function(el){
      return el.getBoundingClientRect().top
    },

    scrollingPositionBottom: function(el){
      return el.getBoundingClientRect().bottom + window.scrollY
    },

    headerPosition: function(){
      return window.scrollY
    },

    bottomSectionHit: function(contentElement, sticky){
      const contentSection = document.getElementById(contentElement)
      const sectionBottom = contentSection.getBoundingClientRect().bottom + window.scrollY
      const stickyPositionScrolling = sticky.getBoundingClientRect().bottom + window.scrollY

      return stickyPositionScrolling >= sectionBottom
    },

    whenScrolling: function() {
      el.stickies.forEach((sticky, i) => {
        const nextSticky = el.stickies[i + 1]
        const prevSticky = el.stickies[i - 1]

        if (this.stickyPosition(sticky) <= this.headerPosition()) {
          sticky.classList.add('fixed')

          if (this.elementExists(nextSticky)) {

            while (this.scrollingPositionBottom(sticky) >= this.nextStickyPosition(sticky, nextSticky) + 50) {
              sticky.classList.add('absolute')
              sticky.style.top = this.nextStickyPosition(sticky, nextSticky)
            }

          // Handle last sticky element
          } else {
            if (this.bottomSectionHit(`sticky-content-${i}`, sticky)) {
              sticky.classList.remove('fixed')
            }
          }

        } else {

          sticky.classList.remove('fixed')

          if (this.elementExists(prevSticky) && window.scrollY <= this.stickyPosition(sticky)){
            prevSticky.classList.remove('absolute')
            prevSticky.removeAttribute('style')
          }
        }
      })
    }

  }
}())

StickySubsections.init()


文章来源: Getting a sticky header to “push up”, like in Instagram's iPhone app using CSS and jQuery
标签： javascript html css instagram sticky
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~