前端实现页面滚动div固定

硅谷探秘者 1142 0 0


前端实现页面滚动div固定


例:

image.png


js实现

var top1 = $(".scroll").offset().top;
		  window.onscroll = function() {
				var win_top = $(this).scrollTop();
				var top = $(".scroll").offset().top;
				if(win_top >= top) {
					$(".scroll").css("position", "fixed");
					$(".scroll").css("top","0px");
					$(".scroll").css("background","#c2e5ff");
				}
				if(win_top < top1) {
					$(".scroll").css("position", "relative");
					$(".scroll").css("background","#ffffff");
				}
		  }
.scroll就是需要固定的div


猜你喜欢
前端(h5) 1475 webhtml添加键盘事件$(document).keydown(function(event){if(event.keyCode==13){document.getElementById
weblog 493 java服务sha256加密importjava.io.UnsupportedEncodingException;importjava.security.MessageDigest
前端(h5) 636 1.生成树状目录结构基于上篇文章,模拟使用线性顺序的h标签生成了树状的目录结构,只是数据结构的变化,本文将使用际案例,生成目录结构并点击位平滑移。2.案例点击目录结构的title,
前端(h5) 661 引入layui相关组件layui.use(['form','laypage'],function(){ var$=layui.$; varlaypage=layui.laypage; varform=layui.form; functionsel(message,page,limit){ $.ajax({ url:'${path}/interview/select',
前端(h5) 1227 1.锚点位很简单两行搞:ahref="#anchorName"点击跳转到anchorName的位置/aaname="anchorName"anchorName/a2.js代码,并带滑效果
weblog 595 javaMD5加密和和javascript加密该加密工具没有加盐java加密工具importjava.security.MessageDigest;importjava.security.NoSuchAlgorithmException;/*** md5加密工具*@authorJiajiajia*@date2020年3月18日*@toduTODO*/publicclassMD5Util{ publ
nginx,前端,java基础 41   基于javanio+netty+websocket+protobuf+javascript等技术高性能时数据传输的demo模型。  github地址:https
框架 609 一般分查询的接口都需要传入page(当第几),limit(限制行数)两个参数。如果框架本身没有做处理的话我们需要自己在控制层写参数去接收和处理这俩参数。如何配置基础框架,让其自接收和处理这些
归档
2018年11月  12 2018年12月  33 2019年01月  28 2019年02月  28 2019年03月  32 2019年04月  27 2019年05月  33 2019年06月  6 2019年07月  12 2019年08月  12 2019年09月  21 2019年10月  8 2019年11月  15 2019年12月  25 2020年01月  9 2020年02月  5 2020年03月  16 2020年04月  4 2020年06月  1 2020年07月  7 2020年08月  13 2020年09月  9 2020年10月  5 2020年12月  3 2021年01月  1 2021年02月  5 2021年03月  7 2021年04月  4 2021年05月  4 2021年06月  1 2021年07月  7 2021年08月  2 2021年09月  8 2021年10月  9 2021年11月  16
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议
目录
祝愿神州十三飞行乘组平安归来