前端实现页面滚动div固定

硅谷探秘者 2029 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) 2316 webhtml添加键盘事件$(document).keydown(function(event){if(event.keyCode==13){document.getElementById
weblog 1854 java服务sha256加密importjava.io.UnsupportedEncodingException;importjava.security.MessageDigest
前端(h5) 1840 1.生成树状目录结构基于上篇文章,模拟使用线性顺序的h标签生成了树状的目录结构,只是数据结构的变化,本文将使用际案例,生成目录结构并点击位平滑移。2.案例点击目录结构的title,
前端(h5) 1471 引入layui相关组件layui.use(['form','laypage'],function(){ var$=layui.$; varlaypage=layui.laypage; varform=layui.form; functionsel(message,page,limit){ $.ajax({ url:'${path}/interview/select',
前端(h5) 2934 1.锚点位很简单两行搞:ahref="#anchorName"点击跳转到anchorName的位置/aaname="anchorName"anchorName/a2.js代码,并带滑效果
weblog 1605 javaMD5加密和和javascript加密该加密工具没有加盐java加密工具importjava.security.MessageDigest;importjava.security.NoSuchAlgorithmException;/*** md5加密工具*@authorJiajiajia*@date2020年3月18日*@toduTODO*/publicclassMD5Util{ publ
nginx,前端,java基础 1304   基于javanio+netty+websocket+protobuf+javascript等技术高性能时数据传输的demo模型。  github地址:https
框架 1730 一般分查询的接口都需要传入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 2021-12  14 2022-01  7 2022-05  1 2022-08  3 2022-09  2 2022-10  2 2022-12  5 2023-01  3 2023-02  1 2023-03  4 2023-04  2 2023-06  3 2023-07  4 2023-08  1 2023-10  1 2024-02  1 2024-03  1 2024-04  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。