sticky相关内容

侧边栏位置粘滞,该位置大于屏幕大小

我有一个高度大于屏幕尺寸的侧边栏,使用position: sticky时,只有滚动到页面末尾才能看到侧边栏的底部。 例如,我如何确保在滚动时,页面的50%已经显示了侧边栏的下部? 此处代码示例:https://jsfiddle.net/zxypmqvg/3/ .main-block { display: flex; } .sidebar { background-color: ..
发布时间:2022-03-17 22:13:14 前端开发

制作 twitter Bootstrap 弹出模式幻灯片并粘贴到页面底部

我正在使用 bootstrap 2.3,我有一个模态框,它会在几秒钟后从页面底部滑动,我希望它贴在屏幕底部.一切正常,除了当您调整浏览器高度时,模式不会粘在底部.请帮忙! 这是弹出窗口的样子:https://www.dropbox.com/s/kn257b07hdle52i/Screenshot%202014-10-27%2016.09.12.png?dl=0 它会一直持续到您调整窗口 ..
发布时间:2022-01-17 10:23:51 前端开发

带有jquery的粘性标题

我想创建多个两个粘性标题,就像在那个网站中一样:http://www.trendyol.com/Kappa/ButikDetay/8690当您向下滚动时,第一个标题与第二个粘性元素结合在一起.之后,两人一起向下移动.我该怎么做?感谢您的提前支持! 解决方案 实现的方法很简单.您检查滚动位置,如果它低于某个数字,则在顶部显示一个固定位置元素(并在滚动位置备份时隐藏). 话虽如此,有一个 ..
发布时间:2022-01-11 16:48:34 其他开发

向下滚动后的置顶标题

我在这个网站上看到了这个粘性标题:http://dunked.com/ (不再活跃,查看存档站点) 当您向下滚动时,粘性标题会从顶部向下. 我查看了代码,但它看起来非常复杂.我只明白这一点:正常的标题是用 JS 克隆的,当你向下滚动页面时,它会从顶部开始动画. 解决方案 开始.基本上,我们在加载时复制标题,然后检查(使用 .scrollTop() 或 window.scroll ..
发布时间:2022-01-11 16:02:25 前端开发

位置:粘性 - 结合 javascript 高度调整时滚动弹跳

在玩了一段时间 position:sticky 之后,我开始为粘性导航实现它,并遇到了这个有趣但令人沮丧的滚动弹跳问题. 这是在许多网站上常见的导航行为类型,您通常会使用 javascript 来计算页面中相对元素的偏移量.当元素到达窗口顶部时,将添加一个 'stuck' 类,使用 position: fixed 将该元素从文档流中取出,并添加一个相同高度的虚拟元素在它的地方,以防止页面“跳 ..
发布时间:2022-01-10 18:09:19 前端开发

HTML——我怎样才能“坚持"?到达页面上的特定部分后我的导航栏?

我想了两种不同的方法来解决这个问题,但我需要帮助. 滚动到部分,然后粘住. 在滚动时隐藏元素,然后在到达页面点后取消隐藏元素. 我该怎么做? 我目前正在使用 stickyjs. 但我没有看到执行我所要求的功能. 解决方案 demo - http://jsfiddle.net/m6q6j8xL/3/ 这是自定义js 在这个演示中,标题变为绿色(fixed ..
发布时间:2022-01-10 17:56:39 前端开发

在 UICollectionView 或 UITableView 中实现 Sticky Cell

我要实现一个包含项目列表的表格,其中包括一个应该始终显示在屏幕上的项目.所以,例如: 列表中有 50 个项目 你的“粘性"列表项是第 25 个 您有 10 个项目可以同时显示在屏幕上 尽管你在列表中的位置,“粘性";列表应始终保持可见 如果您的项目低于您在列表中的位置,则会显示在列表底部 如果您的项目介于之前的项目之间,则应显示在列表顶部 一旦您到达您的项目在列表中的实际位置,它 ..
发布时间:2022-01-09 08:23:51 移动开发

CSS 粘性页眉/页脚和完全拉伸的中间区域?

使用 CSS,我怎样才能简单地获得一个带有 sticky header 和 footer 的页面,只要页面滚动或不滚动,它们就会永远出现.我在网上找到了一些示例,但我更想要的是,无论浏览器大小如何,中间内容区域都应该是 页眉和页脚之间的 100% 拉伸区域. 我的意思是,我发现的大多数示例都正确地使页眉和页脚具有粘性……但是这些只是浮动并且实际上覆盖了“中间"的顶部和底部'内容区域.那不是我 ..
发布时间:2022-01-04 18:13:49 前端开发

为什么 position:sticky with left:0 在可滚动容器内不工作?

我遇到了这个问题 - 我有一个包含一些行的容器,每行都有一个粘性左列,然后是多个其他列.现在在下面的示例中,这会起作用一段时间,但是当您滚动父容器时,位置粘性不再起作用,并且在您滚动时它会被推动. .container {溢出-x:滚动;}.排 {显示:弹性;宽度:100%;}.物品 {最小宽度:173px;}.sticky {最小宽度:250px;位置:粘性;左:0;背景:红色;} ..
发布时间:2021-12-31 12:45:34 前端开发

定义“高度"时“位置:粘性"不起作用

我正在构建一个登陆页面,用户首先会在其中看到一个主要区域,其下方有一个页脚.进一步向下滚动会发现页脚是一个粘性页眉,我打算使用纯 CSS 来实现这一点.为了获得主要内容和页脚的全屏外观,我将 height 属性设置为两个不同的值:92% 和 8%(使用 vh 也不起作用).无论我在 CSS 中指定的 height(不同单位和所有单位)如何,我的页脚 div 都不会粘住.一旦我删除了 height ..
发布时间:2021-12-31 12:39:55 前端开发

我的立场:粘性元素在使用 flexbox 时不粘性

我被这个问题困住了一段时间,并想我会分享这个position:sticky + flexbox gotcha: 我的粘性 div 工作正常,直到我将视图切换到 flex box 容器,当它被包裹在 flexbox 父级中时,div 突然变得不粘了. .flexbox-wrapper {显示:弹性;高度:600px;}.常规的 {背景颜色:蓝色;}.sticky {位置:-webkit- ..
发布时间:2021-12-31 12:36:35 前端开发

jQuery - DIV 以滚动方式移动并将位置固定到窗口的顶部和底部

可能已经有一个 jQuery 插件可以实现这一点,但我找不到一个完全符合我要求的插件.如果有,请指点我的教程,谢谢. 我的问题是我的页面内容很长,当您滚动到页面底部附近时,我的侧边栏不可见. 所以我想让我的 #sidebar div 在您上下滚动页面时粘在浏览器窗口的顶部和底部. 我的侧边栏高度比你的典型屏幕分辨率长,所以我需要侧边栏的底部粘在浏览器窗口的底部以及浏览器的顶部. ..
发布时间:2021-12-29 11:12:40 前端开发

滚动期间粘性导航元素跳转

尤其是在 Firefox 中,我遇到了一个无法解决的问题. 在接下来的页面上,向下滚动时页面会跳转几次 - 主要是在页面未显示完整尺寸的较小屏幕上.您可以通过使浏览器小于页面来重现此问题,以便您必须滚动. 它在这个页面上:http://www.nucanoe.com/frontier-accessories/ 如果我禁用导航选择器上的 position:fixed,它会解决问题 ..
发布时间:2021-12-29 11:07:43 前端开发

制作一个导航栏棒

制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆导航栏棒 制作导航栏棒 制作导航栏棒 /* 标题 */ /* 身体 */身体 {边距:0px;高度:2000px;}.headercss {宽度:自动;高度:320px;位置:相对;}.headerlogo {宽度:自 ..
发布时间:2021-12-29 10:41:18 前端开发

Bootstrap 4 固定顶部导航和固定侧边栏

这是一个很好的示例,说明如何创建带有侧边栏的导航栏.任何人都可以修改代码,以便顶部导航固定在顶部,侧边栏固定/静态,只有主页内容滚动?我可以通过将 class="fixed-top" 分配给 nav 来使导航成为导航顶部固定,但我不知道如何制作侧边栏固定以便它保持在同一位置而不是随着主页内容向上滚动.将 class="sticky-top" 应用到侧边栏似乎不起作用. ..
发布时间:2021-12-24 09:36:54 其他开发

如何在 RecyclerView 中制作粘性标题?(没有外部库)

我想在不使用外部库的情况下修复屏幕顶部的标题视图,如下图所示. 就我而言,我不想按字母顺序进行.我有两种不同类型的视图(标题和普通).我只想固定到顶部,最后一个标题. 解决方案 这里我将解释如何在没有外部库的情况下进行.这将是一个很长的帖子,所以要振作起来. 首先,让我感谢 @tim.paetz 的帖子启发了我开始使用 ItemDecoration 实现我自己的粘性标题的旅程. ..
发布时间:2021-12-23 21:01:01 移动开发

粘性会话/会话亲和性负载均衡策略的优缺点?

实现高可扩展性的一种方法是使用网络负载平衡在多个服务器之间分配处理负载. 这种方法带来的一个挑战是服务器具有状态感知能力——将用户状态存储在“会话"中. 这个问题的一个解决方案是“粘性会话"(也称为“会话亲缘关系"),其中每个用户都被分配到一个服务器,并且他/她的状态数据在整个会话期间只包含在该服务器上. “粘性会话"方法的优缺点是什么?您是否使用过它,如果使用过,您对它感到满意吗? ..
发布时间:2021-12-15 21:19:18 其他开发