老蔡的个人专栏正式成立,以后工作中遇到的技术问题,或者生活中对一些事物的见解,都会和大家分享!独乐乐不如众乐乐!

滚动页面时 实现DIV到达顶部并固定

WEB前端 BlandonTsai 3064℃ 0评论

项目中处理产品详情页时,页面通常由于内容的扩充高度会很高。这样的话,用户在下滑页面时,一来左边导航栏会比较空旷,二来功能栏切换不方便。所以为了提升用户体验,通常会把常用的导航栏或者TAB栏固定到页面顶部,方便用户查看数据。

固定导航栏

像上图所示,左侧的分类导航栏和右侧的商品详情TAB栏,在页面滚动到顶部时进行固定。网上我看了一些网友的范例,有用 JS 函数实现的,有点稍显复杂。我推荐以下这种方案,JS + CSS 的结合版。

CSS代码

JS代码

其中 920 是页面导航栏和功能栏的高度,意思是页面滚动高度达到这个数值时,就会向两栏添加一个 class ,声明此栏固定以实现最终效果。由于使用的是 jquery 的 scroll 方法,记得不要忘了引用 jquery.js。

致命问题:页面DIV 固定到顶部 滚动页面时出现闪动、页面卡顿

使用后,我在测试的时候发现的这个问题。固定后,默认在商品详情一栏,页面高度还是挺高的,这种情况下我测试了一下发现完全正常。

但是,当我点击“销售记录”一栏时,滚动页面时出现闪动,页面直接来回卡顿,无法下滑到底部。这个问题纠结了我不少的时间,实在是不可理喻。问题是无论 css 还是 js 都是非常简单的算法,没有语法的问题啊!难道往往最简单的写法,其实又最复杂?

无非是商品详情和销售记录切换一下而已,两者的 css 代码又是一致的。那还有什么区别呢?高度!!!

定义 min-height 值

最后我发现了解决的根源,竟然是高度问题。由于商品详情栏内容不少,所以高度足以撑开很高的 height 值。而销售记录一个列表十来条下来,连满屏都称不上,还要进行分页。所以我尝试着把销售记录的列表区定义了一个最小高度值 min-height 值,果然起作用了。导航栏准备固定的时候,刚达到固定的高度临界值,所以老是来回卡顿。为了预防商品详情内容太少的风险,我把商品详情和销售记录的内容区都定义了最小高度,问题迎刃而解。

这个问题是偶发性的,不是所有人都会遇到,算是特殊情况吧。遇到类似问题的网友,可以参考一下解决思路。

转载请注明:似水流年 » 滚动页面时 实现DIV到达顶部并固定

如果觉得文章还不错,欢迎打赏
喜欢 (0)or分享 (0)
头像
发表我的评论
取消评论