js 固定悬浮效果实现思路代码-前端开发

下面我就来详细讲解一下“js 固定悬浮效果实现思路代码”的完整攻略。

下面我就来详细讲解一下“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 固定悬浮效果实现思路代码”的示例。需要注意的是，以上代码仅为参考，实际使用时可能需要根据实际情况进行调整。