jq实现页面滚动thead固定在顶部，仅tbody滚动

监听页面滚动 $(window).scroll(function ()
获取窗口滚动高度 $(window).scrollTop()

总体思路：用窗口滚动高度减去元素距页面顶部高度，小于零时thead正常显示，大于零时给thead添加transform样式

展示效果

显示顶部元素时
滚动至顶部元素不显示后：

代码

jquery：

$(window).scroll(function () {var y = $(window).scrollTop() - 438console.log($(window).scrollTop())if (y >= 0) {$('thead').css("transform", "translateY(" + y + "px)")} else {$('thead').css("transform", "translateY(0px)")}});

html：

<thead><tr><th class="text-center">thead1</th><th class="text-center">thead2</th><th class="text-center">thead3</th><th class="text-center">thead4</th></tr><tr><th class="text-center">thead5</th><th class="text-center">thead6</th><th class="text-center">thead7</th><th class="text-center">thead8</th></tr>
</thead>

jq实现页面滚动thead固定在顶部，仅tbody滚动相关推荐

html页面左右滑动固定插件,jQuery全屏滚动插件fullPage.js让你的页面分屏滚动
随着扁平化风格的日益流行,越来越多的网页越来越简单但又看上去高大上,比如小米.魅族.苹果等等知名站点的新品页面,以及360.百度等网站的专题页面越来越采用分屏滚动的风格. 当然实现这种风格的方法有多种 ...
原声表格中将thead固定，tobody超出高度滚动，滚动条样式改变
css设置滚动条的样式注意:滚动条设置的width.height,分别是对应纵向滚动条宽度.横向滚动条高度,无法修改纵向滚动条高度.横向滚动条宽度数值只介绍Google浏览器滚动条样式. 常用属 ...
css x轴不滚动_css – 固定div,动态内容不滚动
我有一个固定的div与动态加载的li元素.现在我希望div-content在有超过9个li元素和滚动条时滚动: 这就是它的样子: 此时固定div继续在页脚上,内容无法滚动. 这是所有div的css: ...
JQ：当页面滚动到一定位置之后，让元素固定在顶部，小于位置后恢复原来的位置
项目背景: 一天小虎找到龙哥说,龙哥你有没有现成的JS板子,就是那种当页面滚动到某个位置时,页面中的某个元素则固定在顶部不在滚动,而小于这个位置之后这个元素又恢复到原来的状态. 实现:这里做了一个简单 ...
页面滚动头部固定背景色显现
页面滚动头部固定背景色显现效果图未滚动前滚动后结构代码: <div class="top" id="topdiv" :class="i ...
[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
滚动页面，实现导航栏固定在顶部（吸顶效果）
内容说明页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部. 本文有两种方式实现,一种是sticky,兼容不好:另外一种是sticky的解体..兼容效果万能 1.首先 ...

jq实现页面滚动thead固定在顶部，仅tbody滚动

jq实现页面滚动thead固定在顶部，仅tbody滚动

展示效果

代码

jq实现页面滚动thead固定在顶部，仅tbody滚动相关推荐

最新文章

热门文章