Discuz教程：实现div随页面滚动位置固定的效果

当我们在网页设计中遇到需要实现一个 div 随页面滚动而固定位置，但到达特定区域后停止固定的需求时，可以通过 JavaScript 来解决。以下是一篇关于此问题的详细解决方案文章，旨在帮助您更好地理解并优化代码。
### 如何实现 div 随页面滚动固定，且在碰到下方 div 时结束固定？在网页开发中，我们经常需要实现某些元素随页面滚动而保持固定位置的效果。然而，当这些固定元素接近页面中的其他内容块时，可能会出现视觉上的冲突或不协调。为了解决这个问题，我们需要对现有的 JavaScript 逻辑进行调整，确保固定的 div 在到达目标区域后能够正确地恢复其原始位置。
#### 原始问题描述根据您的需求，当前的 JavaScript 实现了 div 的固定效果，但在滚动过程中，固定的 div 穿过了下方的目标 div，导致视觉体验不佳。以下是您提供的原始代码：


<script type="text/javascript">
    window.onload=
        function(){
            var oDiv = document.getElementById("fixPara"),
                H = 0,
                Y = oDiv        
            while (Y) {
                H += Y.offsetTop; 
                Y = Y.offsetParent;
            }
            window.onscroll = function()
            {
                var s = document.body.scrollTop || document.documentElement.scrollTop
                if(s>H) {
                    oDiv.style = "position:fixed;top:60px;left: 963px;"
                } else {
                    oDiv.style = "position:static;"
                }
            }
        }
</script>

这段代码实现了 div 在滚动到一定位置后变为固定状态的功能，但没有考虑到固定 div 到达目标区域后的处理逻辑。
#### 改进后的解决方案为了确保固定的 div 在到达目标区域后能够正确停止固定，我们需要引入额外的逻辑来检测 div 是否已经接近下方的目标 div，并在适当的时候将它的 `position` 属性恢复为 `static` 或 `absolute`。以下是改进后的代码示例：


<script type="text/javascript">
    window.onload = function() {
        var oDiv = document.getElementById("fixPara"), // 固定的 div
            targetDiv = document.getElementById("targetDiv"), // 目标 div
            H = 0, // 计算固定的 div 起始位置
            targetTop = targetDiv.offsetTop - oDiv.offsetHeight; // 目标 div 的顶部位置减去固定 div 的高度

        // 计算固定的 div 起始位置
        var Y = oDiv;
        while (Y) {
            H += Y.offsetTop;
            Y = Y.offsetParent;
        }

        window.onscroll = function() {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            // 当滚动到固定的 div 起始位置时，设置为 fixed
            if (scrollTop > H && scrollTop < targetTop) {
                oDiv.style.position = "fixed";
                oDiv.style.top = "60px";
                oDiv.style.left = "963px";
            } 
            // 当滚动到目标 div 位置时，恢复为 static 或 absolute
            else if (scrollTop >= targetTop) {
                oDiv.style.position = "absolute";
                oDiv.style.top = (targetTop - scrollTop) + "px";
            } 
            // 其他情况下，恢复为 static
            else {
                oDiv.style.position = "static";
            }
        };
    };
</script>

#### 代码解析 1. **计算起始位置**：通过 `offsetTop` 和 `offsetParent` 属性，计算出固定的 div 的初始位置。 2. **检测目标区域**：通过 `targetDiv.offsetTop` 和 `oDiv.offsetHeight`，计算出固定的 div 应该停止固定的位置。 3. **动态调整样式**：根据滚动条的位置，动态调整固定的 div 的 `position` 属性，确保它在合适的时间点从 `fixed` 变为 `absolute` 或 `static`。
#### 注意事项 - **浏览器兼容性**：确保代码在不同浏览器中都能正常运行。例如，`document.body.scrollTop` 和 `document.documentElement.scrollTop` 是用于获取滚动条位置的不同方法，适用于不同的浏览器。 - **性能优化**：避免在 `onscroll` 事件中执行过多的计算操作，可以使用节流（throttle）或防抖（debounce）技术来提高性能。
通过以上改进，您可以实现更平滑、更美观的滚动固定效果。希望这篇文章对您有所帮助！

推荐阅读