此JS就是DIV不分随的屏幕而滚动。
<script type="text/javascript">
$(document).ready(function () {
var menuYloc = $("#comment-overlay").offset().top; //此ID为随着屏幕滚动div的ID
$(window).scroll(function () {
var offsetTop = menuYloc + $(window).scrollTop() + "px";
$("#comment-overlay").animate({ top: offsetTop }, { duration: 600, queue: false }); //此ID为随着屏幕滚动div的ID
});
});
</script>
<style>
.comment-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255,255,255,.92);
z-index: 9999999999999;
}
.comment-overlay-login {
text-align: center;
font-size: 30px;
}
.comment-overlay-login p {
margin-bottom: 20px;
}
</style>
<div class="comment-overlay" id="comment-overlay">
<div class="comment-overlay-login"><p>内容 </p></div> </div></div>
- 相关链接:
上一篇:js实现点击显示和隐藏特效代码
- 文章标题:
https://www.ezgcms.com/stuyd/381.html
- zblog后台文章总数跟作者对不上怎么回事
- 分享大学毕业生2020年个人自我鉴定总结
- css如何用实现弧度圆角?三角形以及圆形样式
- HTML5 template标签元素简介
- 第八章 CSS 定义选择器
- js实现点击显示和隐藏特效代码
- HTML高亮关键字的完美解决方案_HTML/Xhtml_网页制作
- 网页特效粒子交叉线条背景动态鼠标联动【css】
- 下拉一定高度顶部导航条浮动并固定显示
- Win10系统电源管理中没有快速启动的方法
- 了解一下纯CSS实现的加载动画项目SpinKit页面加载
- css超出显示省略号怎么设置
- css3实现隔行换色
- 新人怎么 学习网站建设心得
- html代码左右宽度固定中间自适应html布局解决教程