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. webdriervAPI(CSS定位元素)

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

  2. 搭建小规模邮件服务器（winmail-server）

    Winmail mail server邮件系统的安装及使用. 在安装之前首先要配置服务器固定的IP地址.子网掩码和DNS服务器(网关我这里暂时用不着). 先来配置IP地址信息,使两台虚拟机能够互联互通 ...

  3. 在先电IAAS平台中，搭建先电bigdata平台

    以两台节点为例来组件Hadoop分布式集群,这里采用的系统版本为Centos7,如下表所示: 主机名 内存 硬盘 IP地址 角色 master 8192MB 100G 192.168.200.131 ...

  4. NDK学习笔记-NDK开发流程

    本文主要是说明一下在eclipse下如何对NDK进行配置 配置NDK 虽然现在基本上都使用Android Studio进行Android开发,但一些项目在eclipse中仍有运用,这里讲一讲eclip ...

  5. MyBatis使用技巧、总结、注意事项

    目录 1.mybatis的官方文档地址 2.其他技巧: 2.1 如何在代码中拼接 like %% 2.2 数据库比较时日期的错误操作 2.2.1 异常情况: 2.2.2 为什么会在后面指定jdbcTy ...

  6. Json乱码解决统一代码

    我们在springmvc中使用json经常出现乱码格式  如下图: 我们可以在@RequestMapping()中配置,produces = "application/json;charse ...

  7. [Python3 填坑] 004 关于八进制

    目录 1. print( 坑的信息 ) 2. 开始填坑 2.1 问题的由来 2.2 问题的解决 2.2.1 先说结论 2.2.2 八进制的用途 2.2.3 少废话,上例子 1. print( 坑的信息 ...

  8. Spark Scala当中reduceByKey(_+_) reduceByKey((x,y) => x+y)的用法

    [学习笔记] reduceByKey(_+_)是reduceByKey((x,y) => x+y)的一个 简洁的形式*/ val rdd08 = sc.parallelize(List((1, ...

  9. java源码--Vector和Stack

    一.Vector简介 1.1.Vector概述 通过API中可以知道: 1)Vector是一个可变化长度的数组 2)Vector增加长度通过的是capacity和capacityIncrement这两 ...

  10. Python list,tuple,dict,set高级变量常用方法

    list列表 增加 append 在列表中追加,一次只能加一个 insert 按索引插入,一次只能插一个 extend 迭代追加到列表中 list1 = [1, 2, 3] list2 = [4, 5 ...