js 3行代码，最简易实现div效果悬浮
简易实现浮动效果的首要因素是：获取滚动条距离浏览器顶部的距离，下面直接贴代码：
<!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效果悬浮的更多相关文章
- Vue 3-150行代码实现新国标红绿灯效果案例
昨天刷视频,都是关于新国标红绿灯的,看大家议论纷纷,下班就用150行代码通过Vue组件实践红绿模拟演示,视频也跟大家展示过了.今天接着更新图文版本,大家跟着优雅哥通过该案例实操模拟一下. 不过新国标红 ...
- JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...
- 10行代码实现简易版的Promise
实现之前,我们先看看Promise的调用 const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/79910 ...
- jquery 20行代码实现简单轮播效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 如何在js中将统计代码图标隐藏
建站时我们都会加一下网站统计,方便把控内容的内容的运营.大部分站长安装的站点统计是第三方统计代码,js形式的,很少用以服务器日志为基础分析的统计.(当然能通过网站日志来分析网站的运营者比一般的站长水平 ...
- JS模版引擎[20行代码实现模版引擎读后感]
曾经阅读过<只有20行JAVASCRIPT代码, 手把手教你写一个页面模版引擎>这篇文章, 对其中实现模版的想法实在膜拜, 于是有了这篇读后感, 谈谈自己对模版引擎的理解, 以及用自己的语 ...
- Jquery几行代码解决跟随屏幕滚动DIV
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- 程序员的复仇：11行代码如何让Node.js社区鸡飞狗跳
来源自:http://www.techug.com/node-js-community 几天前,一名 NPM(Node.js Package Manager)社区的贡献者 Azer Koçulu 出于 ...
随机推荐
- MVC2 阻止公共方法被调用
阻止公共方法被调用 using System.Web.Mvc; namespace MvcApplication1.Controllers { public class WorkController ...
- vim基本命令速查表
来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/editors/vim.txt ################## ...
- System.IO.FileLoadException:“混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。”
解决方案: 在app.config新增如下配置节: <?xml version="1.0"?> <configuration> <startup us ...
- c# .net中的简单Job
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Spring Boot - Spring Data
使用JPA 虽然JPA是一个标准,但spring中一般就是使用hibernate实现的 使用JPA(Java Persistence API,Java持久化API,是个规范,其实是借助Hibernat ...
- css 可拖拽列表
<!DOCTYPE HTML> <html><head> <meta charset="UTF-8"> <title>d ...
- matlab学习笔记---（1）
Matlab学习笔记 一. Desktop Basics (Matlab 基础知识) 当你打开Matlab的时候,matlab按照以下默认的方式展示出来. 该桌面主要包括以下几部分内容: 当前文件夹: ...
- mysql 数据备份 crontab
每天凌晨 2 点备份数据 crontab -e 0 2 * * * mysqldump ${mysqldir}/bin/mysqldump -h$host -P$port -uadmin -p&qu ...
- tomcat 项目发布方式
1.WEB应用的组成结构 开发web应用时,不同类型的文件有严格的存放规则,否则不仅会使web应用无法访问 还会导致web服务器自动报错. mail:web应用所在目录(该目录自定义) html,js ...
- 操作系统（Operating System，OS）
操作系统(Operating System,OS) 是配置在计算机硬件上的第一层软件,是对计算机硬件系统的首次扩充,是一个计算机系统最基础,也是最重要的系统软件. 操作系统的作用 1 实现对计算机资源 ...