简易实现浮动效果的首要因素是：获取滚动条距离浏览器顶部的距离，下面直接贴代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>js实现div效果悬浮</title>

    <style type="text/css">

        #parentDIV {

            height: 2000px;

        }

        #suspensionBox {

            width: 230px;

            height: 50px;

            border: 1.5px solid red;

            text-align: center;

            line-height: 50px;

            border-radius: 5px;

        }

        .scrollTop{

            position:fixed;

            top:100px;

        }

    </style>

    <script type="text/javascript">

    window.onscroll=function(){

        var t = document.documentElement.scrollTop||document.body.scrollTop;

        var suspensionBox = document.getElementById("suspensionBox");

        suspensionBox.className = "scrollTop";

    }

    </script>

</head>

<body>

    <div id="parentDIV">

        <div id="suspensionBox">我要在中间呀，上上下下呀</div>

    </div>

</body>

</html>

是不是超级简单，是不是超级爽    哈哈哈~ （沧海一声笑， 滔滔两岸潮~）

js 3行代码，最简易实现div效果悬浮的更多相关文章

  1. Vue 3-150行代码实现新国标红绿灯效果案例

    昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了.今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下. 不过新国标红 ...

  2. JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

    效果图 调用示意图   交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...

  3. 10行代码实现简易版的Promise

    实现之前,我们先看看Promise的调用 const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/79910 ...

  4. jquery 20行代码实现简单轮播效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 如何在js中将统计代码图标隐藏

    建站时我们都会加一下网站统计,方便把控内容的内容的运营.大部分站长安装的站点统计是第三方统计代码,js形式的,很少用以服务器日志为基础分析的统计.(当然能通过网站日志来分析网站的运营者比一般的站长水平 ...

  6. JS模版引擎[20行代码实现模版引擎读后感]

    曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...

  7. Jquery几行代码解决跟随屏幕滚动DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  9. 程序员的复仇：11行代码如何让Node.js社区鸡飞狗跳

    来源自:http://www.techug.com/node-js-community 几天前,一名 NPM(Node.js Package Manager)社区的贡献者 Azer Koçulu 出于 ...

随机推荐

  1. C# 使用ftp下载一个文件夹下的所有文件，包括子目录文件夹

    这篇博客给大家补充一个方法,就是得到一个目录下的所有文件名称.在前端调用,大家写一个递归去遍历就可以了,我在这里就不在写了.具体ftp下载的方法在我的另一篇博客里有,需要的可以去看一下. /// &l ...

  2. 用idea做springboot开发，设置thymeleaf时候，新手容易忽略误区

    最近小编因为工作原因需要完成工厂自动化改造,而思来想去觉得还是用Java开发,因为很久没有敲过代码,对java这块已经抛掉很多年.作为工厂自动开发或者大型企业级开发,个人认为java和C#会比较合适, ...

  3. .Net core 应用程序发布Web时，有些文件夹没有发布成功解决办法

    如果文件是你在项目中手动添加的, 那么在解决方案中右击文件,然后点击属性,文件属性----高级----复制到输出目录----改为始终复制/如果较新则复制 即可.

  4. foreach写失效的问题

    本文由作者张远道授权网易云社区发布. 坦白讲身为程序员,bug在所难免.有人讲,bug越多,说明程序员越伟大.这句话有它一定的道理. 因为从某方面讲,bug多了说明他的代码量也多. 言归正传,这里我记 ...

  5. 使用math.js进行javascript精确计算

    javascript进行浮点运算会有尾差,比如算个0.1+0.7试试,得到的不是0.8 .这个问题可以使用math.js解决. Math.js是一款开源的JavaScript和Node.js数学库,用 ...

  6. Day 21 序列化模块_Json,Pickle,Shelve

    序列化 , 数据类型,列表 元组, 字符串 只有字符串能被写入文件中. 能在网络上传输的只能是bytes - 字符串 把要传输的和要存储的内容转换成字符串. 字符串 转换回 要传输和存储的内容 序列化 ...

  7. docker 下载加速

    执行这个命令: curl -SSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.m.daocloud. ...

  8. python打造渗透工具集

    python是门简单易学的语言,强大的第三方库让我们在编程中事半功倍,今天我们就来谈谈python在渗透测试中的应用,让我们自己动手打造自己的渗透工具集. 难易程度:★★★阅读点:python;web ...

  9. 如何查看linux服务器的版本和配置信息

    linux下看配置,可没有windows那么直观.你只能一个一个查看. 一:cpu[root@srv /]# more /proc/cpuinfo | grep "modelname&quo ...

  10. Java Web入门学习（三）Maven的配置与使用国内仓库

    一.Maven下载与配置 下载好的压缩包,压缩到D盘,或者其他盘符. 新建系统环境变量 MAVEN_HOME  值是压缩好的Maven目录. 比如: D:\apache-maven- 在path环境变 ...