下面我就来详细讲解一下“js 固定悬浮效果实现思路代码”的完整攻略。
一、思路分析
实现固定悬浮效果,需要用到position
属性和offset
方法:
- 将悬浮元素设置为position: fixed
,使其脱离文档流,随着页面滚动而停留在浏览器窗口的相对位置不变。
- 利用offset
方法获取目标元素在页面中的绝对位置,以便计算悬浮元素距离浏览器窗口顶部的距离。
二、代码实现
下面分别以两种常见的实现方式来示例说明。
方式一:固定在顶部
当页面滚动到目标元素时,将悬浮元素固定在页面顶部。具体实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box { height: 2000px; } /* 为了占用一定的滚动区域 */
#target { height: 50px; background-color: #ddd; text-align: center; line-height: 50px; }
#fixed { position: fixed; top: 0; left: 0; width: 100%; background-color: #c00; color: #fff; text-align: center; line-height: 50px; display: none; }
</style>
<script type="text/javascript">
window.onload = function () {
var target = document.getElementById('target'); // 目标元素
var fixed = document.getElementById('fixed'); // 悬浮元素
var targetOffsetTop = target.offsetTop; // 目标元素距离页面顶部的距离
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条距离顶部的距离
if (scrollTop >= targetOffsetTop) { // 当滚动条滚动到目标元素时
fixed.style.display = 'block'; // 显示悬浮元素
} else {
fixed.style.display = 'none'; // 隐藏悬浮元素
}
};
};
</script>
</head>
<body>
<div id="box">
<div id="target">目标元素</div>
<div id="fixed">悬浮元素</div>
</div>
</body>
</html>
方式二:固定在底部
当页面滚动到目标元素时,将悬浮元素固定在页面底部。具体实现代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#box { height: 2000px; } /* 为了占用一定的滚动区域 */
#target { height: 50px; background-color: #ddd; text-align: center; line-height: 50px; }
#fixed { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #c00; color: #fff; text-align: center; line-height: 50px; display: none; }
</style>
<script type="text/javascript">
window.onload = function () {
var target = document.getElementById('target'); // 目标元素
var fixed = document.getElementById('fixed'); // 悬浮元素
var targetOffsetTop = target.offsetTop; // 目标元素距离页面顶部的距离
var targetHeight = target.offsetHeight; // 目标元素的高度
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条距离顶部的距离
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; // 获取浏览器窗口的高度
if (scrollTop + windowHeight >= targetOffsetTop + targetHeight) { // 当滚动条滚动到目标元素时
fixed.style.display = 'block'; // 显示悬浮元素
} else {
fixed.style.display = 'none'; // 隐藏悬浮元素
}
};
};
</script>
</head>
<body>
<div id="box">
<div id="fixed">悬浮元素</div>
<div id="target">目标元素</div>
</div>
</body>
</html>
以上是两种常见的“js 固定悬浮效果实现思路代码”的示例。需要注意的是,以上代码仅为参考,实际使用时可能需要根据实际情况进行调整。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js 固定悬浮效果实现思路代码 - Python技术站