程序设计 sticky

9

我想像下面的图像一样在屏幕顶部修复标题视图，而无需使用外部库。就我而言，我不想按字母顺序进行。我有两种不同类型的视图（Header和Normal）。我只想固定到顶部，即最后一个标题。

120 android header android-recyclerview sticky

5

我对此稍作停留，以为我会分享这个position: sticky+ flexbox陷阱：在将视图切换到Flex Box容器之前，我的粘性div工作正常，并且当将div包裹在flexbox父级中时，div突然变得不粘性。 .flexbox-wrapper { display: flex; height: 600px; } .regular { background-color: blue; } .sticky { position: -webkit-sticky; position: sticky; top: 0; background-color: red; } <div class="flexbox-wrapper"> <div class="regular"> This is the regular box </div> <div class="sticky"> This is the sticky box </div> </div> 运行代码段隐藏结果展开摘要 JSFiddle显示问题

105 css flexbox css-position sticky

6

粘边栏：向下滚动时固定在底部，向上滚动时固定在顶部

我一直在寻找一段时间，以解决粘性侧栏问题。我对自己的行为有一个特定的想法；实际上，当您向下滚动时，我希望它粘在底部，然后当您向上滚动时，我希望它以流畅的运动（不跳动）粘在顶部。我找不到我要实现的目标的示例，因此我创建了一个图像，希望可以更清楚地说明这一点：边栏位于标题下方。向下滚动时，侧栏保持与页面内容的水平，以便您可以滚动浏览侧栏和内容。到达侧边栏的底部，侧边栏将粘在视口的底部（大多数插件仅允许粘在顶部，有些插件允许粘在底部而不是两者都允许）。到达底部，侧边栏位于页脚上方。向上滚动时，侧边栏与内容保持水平，因此您可以再次滚动浏览内容和侧边栏。到达侧边栏的顶部，侧边栏粘贴到视口的顶部。到达顶部，边栏位于标题下方。我希望这是足够的信息。我创建了一个jsfiddle来测试所有插件/脚本，对此问题我已对其进行了重置：http : //jsfiddle.net/jslucas/yr9gV/2/ .

94 jquery position fixed sidebar sticky

15

使用CSS强制边栏高度100％（底部带有粘性图像）？

数小时以来，我一直在脑海中摸索，试图找出这个问题，并认为这一定是我所缺少的。我已经在网上搜索过，但找不到任何有效的工具。HTML是： <body> <div id="header"> <div id="bannerleft"> </div> <div id="bannerright"> <div id="WebLinks"> <span>Web Links:</span> <ul> <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li> <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li> <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li> </ul> </div> </div> </div> <div id="Sidebar"> <div id="SidebarBottom"> </div> </div> <div id="NavigationContainer"> <ul id="Navigation"> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> <li><a href="#">Nav</a></li> …

76 css sidebar sticky

8

像在使用iPhone的CSS和jQuery的Instagram iPhone应用程序中那样，获得一个粘性标题以“推动”

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 …

71 javascript html css instagram sticky

Questions tagged «sticky»