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

<!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. Android-XML格式描述

    XML是W3C公司提出的标准,使用范围非常广阔,在框架的配置,程序的配置,布局文件的定义,网络传输等,无所不在: 以前学Java的时候,对XML的名词定义是,根节点,子节点 等等,而在Android里 ...

  2. 【TypeScript】TypeScript 学习 5——方法

    在 JavaScript 中,有两种方式定义方法. 1.命名的方法 function add(x,y){ return x+y; } 2.匿名方法 var myAdd = function(x,y) ...

  3. C# 获取相对路径(绝对路径转相对路径)

    这个的方法有很多吧. 1. 用PInvok调用Windows API的PathRelativePathTo 2. 自行处理字符串 3. 利用Uri 前两种就不说了,觉得有点麻烦,想了解的同学,自已,百 ...

  4. IE下 input 的父级标签被 disabled 之后引发的怪异行为

    前段时间做了个网盘类的项目,意外发现了这个情况 IE下,将input的父级标签增加 disabled 属性之后,input 的行为变得怪异: 1.input 背景变灰,疑似也被disabled 了. ...

  5. Transaction And Lock--使用资源锁来控制并发

    写过程序的朋友都知道,在多线程处理时,对于非线程安全的对象,需用使用锁定特定对象(LOCK)的方法来保证串行操作.曾经有位开发询问我,在SQL Server内部是否有类似的实现方法来控制某一操作不能并 ...

  6. 关于微信支付回调url失败的原因

    首先需要在config配置好url,然后再微信支付里面配置url. 最重要的是url需要外网能在访问,不能有任何权限

  7. MySQL使用 IN 查询取出数据排序问题（与in排序相同、不排序）

    MySQL使用 IN 查询取出数据排序问题(与in排序相同) 今天在项目中遇到一个问题,就是做一个最近浏览的功能,但是功能做出来了,取出数据时候要用到类似这么一条带in查询的sql语句, select ...

  8. UWP开发入门（六）——对多设备不同分辨率显示效果的讨论

    本篇不涉及具体代码,而是把实际开发UWP APP的过程中,遇到的不同设备,不同分辨率显示效果差异的问题进行讨论.希望能够抛砖引玉,和各位擦出一些火花. 蜀黍我目前是在做一套牛逼的UWP APP啦,目标 ...

  9. flask源码解析之session

    内容回顾 cookie与session的区别: 1. session 是保存在服务端的键值对 2. cookie 只能保存4096个字节的数据,但是session不受限制 3. cookie保存在浏览 ...

  10. iOS Block初探

    //https://www.jianshu.com/p/d28a5633b963 #import <Foundation/Foundation.h> void (^FFGlobalBloc ...