网页中的DIV层随着页面移动而移动

明迪

于 2021-08-29 15:39:09 发布

阅读量2.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： javascript css html5

本文链接：https://blog.csdn.net/edsoki/article/details/119981049

前端开发专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了一个网页实现的功能，当用户滚动页面时，一个名为WaitList的div元素会随滚动条动态调整其位置，展示购买清单。清单包含品牌、原价、优惠价格和单位等关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="WaitLst" class="col-lg-3 col-md-3 col-sm-4 sidebar">
	<div class="sidebar-box category-box white" style="opacity: 1;">
		<h3>购买清单</h3>
			<ul>
			    <li><a>品牌：{dede:field.brand/}</a></li>
				<li><a>商品原价：{dede:field.price/}元</a></li>
				<li><a>优惠价格：{dede:field.trueprice/}元</a></li>
				<li><a>单位：{dede:field.units/}</a></li>
			</ul>
	</div>
</div>



<script type="text/javascript">

	$(window).scroll(function () {
		var scrollHeight = document.documentElement.scrollTop;
        //WaitList 是 div ID（id="WaitLst"）
        //top: scrollHeight + 150 + "px"   150为距离顶部高度
		$("#WaitLst").css({ top: scrollHeight + 150 + "px" }).show(); 
	});

</script>

WaitList 是 div ID（id="WaitLst"）

top: scrollHeight + 150 + "px" 150为距离顶部高度

页面效果图如下：