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 Widget框架概述

    Flutter Widget采用现代响应式框架构建,这是从 React 中获得的灵感,中心思想是用widget构建你的UI. Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么.当w ...

  2. webdriervAPI(CSS定位元素)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  3. Intellij IDEA 激活到2100年教程

    1.先看效果   2.下载 JetbrainsCrack-4.2-release-enc.jar,提取码:9os6.并将下载后的文件复制到$ {InstallDir} / bin,$ {Install ...

  4. 简单深入Joomla!3.1.5模块_组件开发（一）

    简单深入Joomla!3.1.5模块_组件开发 主要内容: 1, 模块(访问数据库,链接到组件,数据基本流向) 2, 组件CRUD(MVC模式,访问数据库,表单提交,AJAX提交,数据基本流向) 3, ...

  5. ZOJ Problem Set - 1010

    算法:已知多边形各顶点坐标,求多边形面积的公式 http://www.cnblogs.com/FleetingTime/p/3849957.html http://www.mathchina.net/ ...

  6. SQL语句中的HAVING关键字

    sql中的having语句是在使用group by的时候使用的. 通常where语句是在group by之前做数据筛选的,而having语句是对group by之后的结果进行筛选的. 例如: 从商品销 ...

  7. java 分解整数 【个 十 百 千】，获得个位、十位、百位数字

    求一个数数的个位数,十位数,百位数及千位: int num = 53; int g = (num / 1) % 10;  //个位 int s = (num / 10) % 10; //十位 int ...

  8. Ural 1250 Sea Burial 题解

    目录 Ural 1250 Sea Burial 题解 题意 输入 题解 程序 Ural 1250 Sea Burial 题解 题意 给定一个\(n\times m\)的地图,\(.\)为水,\(\#\ ...

  9. Statefulset的拓扑状态

    Statefulset: 实例之间有不对等关系,以及实例对外部数据有依赖关系的应用,就被称为“有状态应用”(Stateful Application). StatefulSet 的设计其实非常容易理解 ...

  10. APP安全测试之安装/卸载/更新测试

    在app测试中,有个不可忽视的测试方向,就是安装.卸载和更新,有很多人问到了这个问题,我就在这里做了一个总结,有补充的请留言哦 安装 1.正常安装测试,检查是否安装成功. 2.APP版本覆盖测试.例如 ...