1.css

<style type="text/css">

.elementFixed{

    position: fixed;

    top:0;

}

</style>

2.body

<body>

　　<input type="hidden" id="scroll_return" value = ""> 
</body>

3.script

<script type="text/javascript">

/**

 *  固定某一元素,当某一元素滚动到浏览器的顶部时,fixed固定

 * firstDiv:第一个元素

 * secondDiv:第二个元素

 * firstDiv+secondDiv:因为fixed会脱离文档流,firstDiv是为了避免secondDiv的宽度变形的

 */

function fixedDiv(firstDiv,secondDiv){

    //定位元素距离浏览器顶部的距离

    var fixedH = $("#firstId").offset().top;

    //添加window的滚动条事件

    $(window).scroll(function(){

        //滚动条的滑动距离

        var scrollH = $(this).scrollTop();

        //滚动条的滑动距离大于定位元素距离浏览器顶部的距离，就固定，反之就不固定

        if(scrollH>fixedH){

            //是否返回

            var scroll_return = document.getElementById("scroll_return").value;

            //有值则返回

            if("scroll_return"==scroll_return){

                return true;

            }

            //console.log("固定,滚动距离:"+scrollH);

            $("#tableTbodyId").html(firstDiv+secondDiv);

            $("#tableTheadId").addClass("elementFixed");

            //赋值返回,下次不继续添加

            document.getElementById("scroll_return").value = "scroll_return";

        } else {

            //console.log("不固定,滚动距离:"+scroH);

            $("#tableTbodyId").html(secondDiv);

            $("#tableTheadId").removeClass("elementFixed");

            //清空滚动赋值

            document.getElementById("scroll_return").value = "";

        }

    })

}

//清除滚动事件

$ (window).unbind ('scroll');

</script>

fixed固定元素的更多相关文章

  1. 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案

    如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...

  2. CSS fixed 定位元素失效的问题

    一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...

  3. 移动端fixed的元素抖动的问题

    工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果: 在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ ...

  4. 移动端 fixed 固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~

    在移动端 H5 页面开发中,我使用了 fixed 固定某个元素在屏幕的最下方, 这时点击输入框,接着非常非常自然地出现了元素被系统键盘顶起来的情况,如下图. 解决方案: 首先,给页面最外层包裹一层 d ...

  5. 移动端— position: fixed;固定定位解决方案

    这里有个关键的东西叫做viewport,你经常在页面的头部里可以见到它: <meta name="viewport" content="width=device-w ...

  6. 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed

    这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...

  7. UC浏览器中，设置了position: fixed 的元素会遮挡z-index值更高的同辈元素

    "UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高 ...

  8. CSS——fixed 固定定位相对于父容器

    position:fixed 固定定位 用 left top 都是相对于浏览器的. 我今天想给网页做一个固定定位的导航 偶然间发现.可以用margin 相对于父容器定位. 小伙伴们可以试试. 不用le ...

  9. 解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐

    一.固定表头后表体列和表头不对齐 此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...

随机推荐

  1. Flutter之切换导航TabBar组件

    TabController 这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等. TabController的创建有两种形式,一种是使用系统的DefaultTabC ...

  2. [Python[PyQt]] ModuleNotFoundError: No module named 'PyQt5.QtWebEngineWidgets'

    解决办法: pip install PyQtWebEngine

  3. 《剑指offer》字符串专题 (牛客11.01)

    字符串的题目难度不一,涉及到的考点有字符串处理.字符串匹配(自动机.正则).模拟,以及递归.动态规划等算法. 难度 题目 知识点 ☆ 02. 替换空格 从后往前 ☆☆ 27. 字符串的排列 回溯,St ...

  4. C/C++编程

    基本的数据类型: 整型 浮点型(单精度.双精度) 在c语言中,所有的变量声明必须在任何执行语句之前(对当前域来说), 否则编译的时候会出现变量是未声明的标识符的错误. main 入口参数:argc 和 ...

  5. 最新 昆仑万维java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.昆仑万维等10家互联网公司的校招Offer,因为某些自身原因最终选择了昆仑万维.6.7月主要是做系统复习.项目复盘.Leet ...

  6. 【转载】SpringBoot-配置发送邮件遇到的一些问题

    前言:前一天调用163邮箱发送邮件还么有问题,今天再调用就各种发送不成功,害的我都关闭授权,还花了一毛钱短信费重新开启授权,最后百度到了一篇文章,非常贴切,在此转载下. 本人遇到的错误代码是554,邮 ...

  7. ubuntu 忘记密码如何 修改密码

    ubuntu 忘记密码如何 修改密码 这个链接讲的很不错 https://blog.csdn.net/zd147896325/article/details/81664558 本来我只是玩一玩,但是我 ...

  8. php中的访问类型（public，private，protected）

    类型的访问修饰符允许开发人员对类成员的访问进行限制,这是PHP5的新特性.但却是oop语言的一个好的特性.而且大多数的oop语言都已支持此特性.PHP5支持三种访问修饰符: public(公有的,默认 ...

  9. multipart/form-data（二进制流） 两种传输方式

    一.传统表单提交传输方式 <form id= "uploadForm" action= "url" method= "post" en ...

  10. django的admin密码忘记了怎么办?一分钟解决!!

    django-admin确实是在实际开发中很方便,然后项目开发一段时间放到一边,等你再去玩你当初的项目的时候,可能抱歉你的admin密码忘记了,其实解决办法有很多种,我直说最快的一种,直接重新建立一个 ...