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

<!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文件的上传、下载功能、新建目录以及文件的删除

    本来这篇博文应该在上周就完成的,可无奈,最近工作比较忙,没有时间写,所以推迟到了今天.可悲的是,今天也没有太多的时间,所以决定给大家贴出源码,不做详细的分析说明,如果有不懂的,可以给我留言,我们共同讨 ...

  2. Asp.Net 跨域,Asp.Net MVC 跨域,Session共享,CORS,Asp.Net CORS,Asp.Net MVC CORS,MVC CORS

    比如 http://www.test.com 和 http://m.test.com 一.简单粗暴的方法 Web.Config <system.web> <!--其他配置 省略……- ...

  3. K8S+GitLab-自动化分布式部署ASP.NET Core(二) ASP.NET Core DevOps

    一.介绍 前一篇,写的K8S部署环境的文章,简单的介绍下DevOps(Development和Operations的组合词),高效交付, 自动化流程,来减少软件开发人员和运维人员的沟通.Martin ...

  4. SQL处理数据并发，解决ID自增

    1 创建MaxIdProcess表,由于存储ID的最大值 CREATE TABLE [dbo].[MaxIdProcess]( ,) NOT NULL, --自增ID ) NOT NULL, --存储 ...

  5. WPF窗口启动时最大化

    在xaml对应的后台代码文件的初始化方法中: public ShellView() { InitializeComponent(); #region 启动时串口最大化显示 Rect rc = Syst ...

  6. .net core获取appsettings CustomSettings

    private static string GetCustomSettings(string key) { var config = new ConfigurationBuilder() .AddIn ...

  7. 使用css保持一定宽高比例

    需求描述:移动端实现横跨页面半圆.(类似问题,实现4x4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度比为1:2的块. 需要解决问题: 1,高度和宽度按照一定比例. 2,外容器高度和宽度不 ...

  8. Educational Codeforces Round 26 A B C题

    题目链接 A. Text Volume 题意:计算句子中,每个单词大写字母出现次数最多的那个的出现次数(混不混乱QAQ). 解题思路:注意getchar()就没啥了. #include<cstd ...

  9. jvm内存结构（二）（栈的变化，机器指令的格式/执行模式）

    栈的结构: <Java虚拟机原理图解>4.JVM机器指令集 局部变量表: 方法执行时,虚拟机会把字节码中方法数据区的code类型的属性中的局部变量放到栈的局部变量表中. 操作栈: jvm指 ...

  10. 简单HOG+SVM mnist手写数字分类

    使用工具 :VS2013 + OpenCV 3.1 数据集:minst 训练数据:60000张 测试数据:10000张 输出模型:HOG_SVM_DATA.xml 数据准备 train-images- ...