jquery滚动监听，并且固定表头

缺乏、安全感 2023-08-17 15:44 146阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>测试实例</title>
      <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    
    <body>
        <div style="height:200px;border: 1px solid">
            <p>1</p>
        </div>
        <div class='two' style="height:200px;border: 1px solid">
            <p>监听2</p>
        </div>
        <div style="height:200px;border: 1px solid">
            <p>3</p>
        </div>
        <div style="height:200px;border: 1px solid">
            <p>4</p>
        </div>
    
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
      <script>
        $(function(){
            //获取要定位元素距离浏览器顶部的距离
            var navH = $(".two").offset().top;
            // console.log(navH);
            //滚动条事件
            $(window).scroll(function(){
                //获取滚动条的滑动距离
                var scroH = $(this).scrollTop();
                // console.log(scroH);
                //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
                if(scroH>=navH){
                    $(".two").css({"position":"sticky","top":0});
                }else if(scroH<navH){
                    $(".two").css({"position":"static"});
                }
             })
        });
    
      </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，146人围观）

还没有评论，来说两句吧...

相关阅读

相关 table表头固定只让内容滚动

table表头固定只让内容滚动纯css实现表头固定，只tbody滚动需要用到粘性固定属性 – position:sticky position:sticky

曾经终败给现在/ 2024年03月26日 16:51/ 0 赞/ 100 阅读

相关 table表头固定并添加滚动条

实现表头锁定的方式很多，这里这种方式是比较简单，并且是没有任何问题的；完整代码示例： <!DOCTYPE html>

古城微笑少年丶/ 2024年02月19日 17:01/ 0 赞/ 61 阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 147 阅读

相关 vue+element固定表头滚动条导致表头错误

解决方法 1. untl.js 封装一个公共的方法 // 重置表格 resetTableDom(table

你的名字/ 2023年06月17日 10:57/ 0 赞/ 21 阅读

相关 html表头固定原理,表头固定(利用jquery实现原理介绍)

表头固定应该是一个用得比较多的功能，参考了网上几个例子，在几个常用浏览器下显示不是很完美。而且很多都是基于固定的表格，在编码时多写一个固定的表头，对于动态生成的不知道多少列的表

小灰灰/ 2022年10月05日 12:57/ 0 赞/ 261 阅读

相关 jquery实现滚动监听实例

css: <style> { list-style: none; }

素颜马尾好姑娘i/ 2022年09月14日 09:10/ 0 赞/ 161 阅读

相关侧边固定导航菜单监听滚动

jQuery实现的滚动侧边栏菜单，页面下滑时侧边栏会黏附在页面上，滚动版块时，对应菜单会点亮 PS：请注意避免包裹层因为float浮动的塌陷问题，建议使用\{overflow

喜欢ヅ旅行/ 2022年09月13日 05:23/ 0 赞/ 236 阅读

相关 css 表头不滚动,css固定表头不随滚动条移动.doc

先说效果描述如图：涉及到数据保密的缘故所以数据弄掉了。效果为：整个grid数据会出现横向，竖向滚动条。其中所有的表头：操作，序号，测试1.。。。等等要素，不会随着竖向滚动条的滚

深藏阁楼爱情的钟/ 2022年09月02日 15:40/ 0 赞/ 273 阅读

相关 table表头固定，内容可滚动问题

1.首先新建html页面body中写入： <div class="title_div" id="tdiv"> <table class="tit

偏执的太偏执、/ 2022年06月02日 01:12/ 0 赞/ 249 阅读

相关 jquery 表格表头固定，表格滚动 ------gxy

实现了表头固定，表身滚动： -------------------- <div id="scroll_table" class="col-md-12 bottom_

约定不等于承诺〃/ 2022年05月28日 00:21/ 0 赞/ 404 阅读