javascript - JS页面sticky翻页效果如何实现？
整个页面有2个部分，
第一部分如上图蓝色标注，蓝色部分高度大于浏览器高度，
滑动蓝色部分往上，当蓝色部分的底部和浏览器的底部的保持一致高度的时候，
希望蓝色部分固定住，类似sticky的效果，
继续滑动页面往上，白色部分会直接往上走，盖在蓝色部分往上滑动，
请问下这个效果有什么关键字吗
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div style=" position: sticky; bottom: 50px; height: 200vh; background-color: lightblue; border-bottom: 10px solid orange; z-index: 19; " ></div> <div style="height: 150vh; background-color: red"></div> </body></html>共有3个答案
监听滚动事件，
获取蓝色部分的getBoundingClientRect().bottom,
当bottom的值等于屏幕高度时，
给蓝色部分设置 position: sticky; top: getBoundingClientRect().top
就可以了
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div style=" position: sticky; /* bottom: 50px; */ top:calc(-100vh - 50px); height: 200vh; background-image: linear-gradient(to bottom, blue,skyblue); border-bottom: 10px solid orange; z-index: 0; " ></div> <div style="height: 150vh;width: 50vw; background-color: red;position: relative; z-index: 1; "></div> </body></html>看这样子行不行，sticky应该没有bottom的用法，只能固定在上面，其他还能通过控制div的一些层级进行更细点的操作
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { margin: 0; overflow-x: hidden; } .sticky-section { height: 200vh; background-color: lightblue; border-bottom: 10px solid orange; } .scroll-section { height: 150vh; background-color: red; } </style> </head> <body> <div class="sticky-section" id="stickySection"></div> <div class="scroll-section"></div> <script> const stickySection = document.getElementById('stickySection'); window.addEventListener('scroll', () => { const stickyBottom = stickySection.getBoundingClientRect().bottom; const windowHeight = window.innerHeight; if (stickyBottom <= windowHeight) { stickySection.style.position = 'fixed'; stickySection.style.bottom = '0'; } else { stickySection.style.position = 'static'; } }); </script> </body></html>看看这篇文章用原生JS实现滚轮翻页效果
-
本文向大家介绍Bootstrap实现翻页效果，包括了Bootstrap实现翻页效果的使用技巧和注意事项，需要的朋友参考一下 Bootstrap之翻页。 优点： 支持局部刷新； 只要是列表，都可以加载该组件； 支持动态数据绑定； 当然还有绝对的简单实用。 效果图 最后一页时： 最开始一页时： 实现 ①、翻页组件的布局 pageNum：第几页 rel：要刷新哪一个div的id urlParas：其他参
-
本文向大家介绍js实现下一页页码效果，包括了js实现下一页页码效果的使用技巧和注意事项，需要的朋友参考一下 效果图： 代码如下： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍javaScript+turn.js实现图书翻页效果实例代码，包括了javaScript+turn.js实现图书翻页效果实例代码的使用技巧和注意事项，需要的朋友参考一下 为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的 很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效
-
本文向大家介绍jQuery实现手机版页面翻页效果的简单实例，包括了jQuery实现手机版页面翻页效果的简单实例的使用技巧和注意事项，需要的朋友参考一下 如下所示： 以上就是小编为大家带来的jQuery实现手机版页面翻页效果的简单实例全部内容了，希望大家多多支持呐喊教程~
-
本文向大家介绍基于Android实现3D翻页效果，包括了基于Android实现3D翻页效果的使用技巧和注意事项，需要的朋友参考一下 最近做了一个简单的3D效果翻页特效，先说说我的思路吧，首先我这个翻页效果并不是两个Activity之间的跳转，而是在同一个activity类切换不同的view而已。我现在的做法是单击一个button然后Gone当前的布局，然后把需要呈现的布局visible，在隐藏当前
-
leaves（http://code4app.com/ios/Page-Peel-View/4f6d8d2f6803fa3064000001）是比较有名的iOS第三方控件，用于电子书的翻页效果，但可惜不支持读取和显示txt格式的文件。这份代码改进了这一点，让leaves也能支持加载和显示txt文件。 作者说：基本思路是先将txt装载进textview，然后根据读取页码来截图，以图片的方式利用lea