登录
当前位置： 首页 > 面试题库 >

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

姚自强
2023-03-14
问题内容：

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();

    }); 
});

}）（）;


问题答案：

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

我们需要的是一系列可以识别，循环然后设置的元素，以便当我们在页面上达到它们的位置时，上一项会被推高，而新项将变得固定。我们将需要使用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版本的时候，我刚刚经历了所有这些事情！！” 它仅适用于几种浏览器。 例如，在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



 类似资料：
  • Android-如何设计滑动菜单，就像在FIFA官方iPhone应用程序中设计的那样

    我已经在谷歌搜索了很多以下的设计，但所有我最终是导航抽屉，这是一点不同，与下面的一个。我从FIFA官方iPhone应用程序中截图 如何在Android中设计像下面这样的滑动菜单

  • 迅速的UICollectionView粘性标头

    问题内容： 我正在尝试创建一个粘性补充标题，该标题始终保持在顶部，并且不会响应滚动事件。到目前为止，我发现的解决方案仍然可以对快速滚动进行反应，并使用自定义flowLayout进行了修复，这也可能是解决我的问题的方法。 我想要这种方式的原因是该标头在其他地方使用并且应该可重用。我希望可以通过这种方式解决此问题，而不必创建单独的视图。 当我在Swift中进行此操作时，在Swift中有一个示例将是很棒

  • 像Instagram应用程序一样显示多个图像[就像在post中水平显示]

    我想像Instagram应用程序一样水平显示一些图像集 示例：示例在这里 我怎么能做到这一点，帮帮我。预先Thanx

  • 如何使用jQuery获得CSS属性的数字部分？

    问题内容： 我需要根据CSS属性进行数值计算。但是，当我使用它来获取信息时： 它返回值“ 10px”。有没有窍门刚开值的数字部分无论是或或或什么？ 问题答案： 这将清除字符串中的所有非数字，非点和非减号： 更新为负值

  • jQuery-向下滚动时会缩小的粘性标头

    问题内容： 我想知道当向下滚动页面时如何使粘性标头收缩（带有动画），而当页面向上滚动至顶部时又如何回到正常状态。 我得到了固定的零件，但是当用户向下滚动时，应该如何缩小标题呢？ 万分感谢 问题答案： 这应该是您使用jQuery寻找的东西。

  • iPhone应用程序的翻译

    我想本地化我的应用程序（按照苹果公司的建议）到几种语言，如英语，西班牙语，法语等。 嗯，我不会说或听不懂所有这些语言，至少我的翻译在母语人士看来很尴尬。 （在线翻译的结果是第一个开始，但当然还不够。）那么，有没有人知道一个服务/平台，在那里我可以从以英语为母语的人那里相互获得翻译。 例如： 我说德国母语，需要我的APP/文本/网站翻译成英语。 另一个家伙可能会说英语母语，需要他的应用程序/文本/网

相关阅读

如何将CSS与Rails应用程序中的ruby一起使用？如何在React应用程序中使用CSS模块应用全局样式？使用jQuery获取* all * CSS属性Prthon-如何在Python中获得像Cron这样的调度程序？REST API-使用“接受：应用程序/ json” HTTP标头

相关文章

Spring AOP基于XML的应用程序Spring Batch应用程序入侵Web应用程序HTML5 应用程序缓存GWT 应用程序调试

相关问答

在Ionic应用程序中一起使用CORS和CSRF使用jQuery和Javascript打开IOS摄像头应用程序并将其存储为变量无法通过eowise捕获粘性标头（RecyclerView）的标头的子视图的touch事件通用应用程序中Iphone的固定方向是否可以与instagram分享我的ios应用程序中的图像？

相关工具

jQuery iPhone UIjQuery iPhone Pluginios应用程序开发框架用ruby写的采集程序Instagram-clone

相关文档

像 IDE 样使用 VIM马上着手开发 iOS 应用程序那些年我们一起学 XSSPerl 程序员应该知道的事Java 程序员眼中的 Linux
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.