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. Spark + sbt + IDEA + HelloWorld + MacOS

    构建项目步骤 首先要安装好scala.sbt.spark,并且要知道对应的版本 sbt版本可以在sbt命令行中使用sbtVersion查看 spark-shell可以知晓机器上spark以及对应的sc ...

  2. 找到数组中频次大于1/k的数

    Majority Number III 给定一个数组(长度为L),找到所有出现频次大于1/k的数字. 我们主要使用摩尔投票法(Voting Algorithm)结合Map的数据结构解决此问题.其时间复 ...

  3. Odoo 13 released..

    origin https://medium.com/@jc_57445/odoo-13-is-fantastic-f2b421696b49 Most striking changes The most ...

  4. 最新 华云数据java校招面经 （含整理过的面试题大全）

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

  5. Spring 控制器重定向

    1.示例 return "redirect:/allUser"; redirect是跳转的意思后面是跳转的页面

  6. Linux中tftp安装及使用笔记

    tftp命令用在本机和tftp服务器之间使用TFTP协议传输文件. TFTP是用来下载远程文件的最简单网络协议,它其于UDP协议而实现. linux服务器端tftp-server的配置 1.安装tft ...

  7. 磁盘冗余列阵Raid技术知识与实践

    Raid介绍 什么是Raid?  Raid级别介绍  Raid 技术分类 RAID分为两类: 软RAID, 系统层面实现的,性能差. 硬RAID, 硬件层面实现的,性能好. 主板板载RAID: 功能弱 ...

  8. SQLite进阶-17.视图

    目录 视图(View) 操作视图 更新视图 删除视图 查看所有的视图 视图(View) 视图是一个预定义的SQLite查询的形式存在的表的组合. 可以包含一个表的所有行或从一个或多个表选定行.可以从一 ...

  9. 2017"百度之星"程序设计大赛 - 资格赛 1002 度度熊的王国战略

    全局最小割 Stoer-Wagner (SW算法)优化 优化吃藕了,感谢放宽时限,感谢平板电视 (pb_ds) #include <iostream> #include <cstdi ...

  10. WEB监控系列第三篇：graphite指南

    一  使用说明 以下是喂数据的方式,但是在实际使用中我们使用statsd来喂数据,请参考我的第四篇文章:statsd指南 喂数据有三种方式: There are three main methods ...