弹窗随屏幕滚动
Posted lljun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹窗随屏幕滚动相关的知识，希望对你有一定的参考价值。
1、
$(document).ready(function() {
var menuYloc = $("#offsetTop").offset().top - 350; //此ID为随着屏幕滚动div的ID，这个是获取的距离屏幕顶部的距离
$(window).scroll(function() {
var offsetTop = menuYloc + $(window).scrollTop() + "px"; //这个是距离顶部的距离加上滚动的距离
if ($(window).scrollTop() > 248) {
$("#offsetTop").animate(
{ top: offsetTop },
{ duration: 300, queue: false }
); //此ID为随着屏幕滚动div的ID
} else {
$(".offsetTop").animate(
{ top: 220 },
{
duration: 300,
queue: false
}
); //此ID为随着屏幕滚动div的ID
}
});
});
注：标记颜色的部分可根据具体情况更改；
2、
$(document).ready(function() {
var menuYloc = $(".offsetTop").offset().top;
$(window).scroll(function() {
var offsetTop = menuYloc + $(window).scrollTop() + "px";
$(".offsetTop").animate(
{ top: offsetTop },
{ duration: 300, queue: false }
);
$(".offsetTop").animate(
{ top: menuYloc },
{
duration: 300,
queue: false
}
);
});
});
以上是关于弹窗随屏幕滚动的主要内容，如果未能解决你的问题，请参考以下文章
vue2.+element 弹窗大小屏固定居中，使用内置滚动条