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

<!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. JAVA 从头开始<四>

    一.switch 1.根据输入月份获取季节 import java.util.*; class Demo8{ public static void main(String[] args) { Syst ...

  2. 在Asp.Net MVC中使用NPOI插件实现对Excel的操作（导入，导出，合并单元格，设置样式，输入公式）

    前言 NPOI 是 POI 项目的.NET版本,它不使用 Office COM 组件,不需要安装 Microsoft Office,目前支持 Office 2003 和 2007 版本. 1.整个Ex ...

  3. 知识记录：ASP.NET 应用程序生命周期概述及Global.asax文件中的事件

    IIS7 ASP.NET 应用程序生命周期概述 https://msdn.microsoft.com/zh-cn/library/bb470252(v=vs.100).aspx HttpApplica ...

  4. 实现单台测试机6万websocket长连接

    本文由作者郑银燕授权网易云社区发布. 本文是我在测试过程中的记录,实现了单台测试机发起最大的websocket长连接数.在一台测试机上,连接到一个远程服务时的本地端口是有限的.根据TCP/IP协议,由 ...

  5. 如何使用socket进行java网络编程（二）

    通过在如何使用socket进行java网络编程(一)中程序的编写,可以总结出一些常用的java socket编程的范例来. ServerSocket server = new ServerSocket ...

  6. OpenStack 数据库操作 demo

    #!/usr/bin/env python from sqlalchemy.orm import sessionmaker from sqlalchemy import create_engine f ...

  7. Weekly Contest 132

    1025. Divisor Game Alice and Bob take turns playing a game, with Alice starting first. Initially, th ...

  8. 栈的实现——c++

    栈(stack),是一种线性存储结构,它有以下几个特点: (01) 栈中数据是按照"后进先出(LIFO, Last In First Out)"方式进出栈的. (02) 向栈中添加 ...

  9. 去除eclipse的validating

    删除.project文件中的validator,如 <buildCommand> <name>org.eclipse.wst.jsdt.core.javascriptValid ...

  10. 压缩VBox虚拟机空间的方法

      虚拟机使用久了就会发现虚拟文件越来越大,删除虚拟机中的文件之后物理主机的磁盘空间并不会相应减少,所以实际占用的空间并没有虚拟文件大小那么大,因此我们很有必要进行压缩.不过VirtualBox貌似没 ...