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. C#：获取控件对象在工具箱里的图标

    工作上的需要.要写一个对控件操作的插件. 在插件中需要把设计器界面上的控件以树形结构列出来,配上控件在工具箱的图标.效果如图: 怎么能够获取到这个图标呢?下面用个例子说明. public Class ...

  2. npm install, npm install -g, npm install --save, npm install --save-dev之间的区别

    1.npm install X 安装X到项目的node_modules文件夹 会修改package.json,在dependencies中写入依赖.(关于这一点,网上的大部分文章都是说,不会修改pac ...

  3. 2019Java常见面试下

    1.集合的作用是什么? 数据的传送增.删.改.查.constainsAll,可以存放不同类型的对象. 2.集合的通用方法有那些?通用方法是什么?(操作) 集合List的遍历方法有: Iterator: ...

  4. NDK学习笔记-文件的拆分与合并

    文件的拆分与合并在开发中经常会用到,上传或是下载的时候都有这样的运用 文件拆分的思路 将文件大小拆分为n个文件 那么,每个文件的大小就是等大小的 如果文件大小被n除不尽,那么就使用n+1个文件来拆分 ...

  5. [转帖]龙芯:Docker 配置与实践清单

    Docker 配置与实践清单 http://www.sohu.com/a/254904706_198222 文章对来官方文档及 Docker Links[1] 中链接内容进行归档整理,包含了日常工作中 ...

  6. TIME_WAIT和CLOSE_WAIT的区别

    系统上线之后,通过如下语句查看服务器时,发现有不少TIME_WAIT和CLOSE_WAIT. netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) ...

  7. PB事件/函数的触发机制和触发方式

    PB作为windows下的一个非常便捷的DB开发工具,有着和windows一样的消息触发机制PB提供了相应event/function触发机制和触发方式,用户可以根据自己的实际需要选用不同方法. 1. ...

  8. CSS实现单选按钮

    import React from 'react' import PropTypes from 'prop-types' import CX from 'classnames' import _ fr ...

  9. 关于BIOS系统的认识和学习（源自摘录）

    BIOS系统的介绍与学习 BIOS (basic input output system 即基本输入输出系统)在计算机系统中起着非常重要的作用,其是计算机系统最底层的设置, BIOS设置程序是被固化到 ...

  10. Java多线程（九）：生产者消费者模型

    生产者消费者模型 生产者:生产任务的个体: 消费者:消费任务的个体: 缓冲区:是生产者和消费者之间的媒介,对生产者和消费者解耦. 当 缓冲区元素为满,生产者无法生产,消费者继续消费: 缓冲区元素为空, ...