如何在滚动时突出显示/将颜色更改为div

要在滚动时突出显示或将颜色更改为div，可以使用JavaScript来检测滚动位置，并根据该位置动态更改div的样式。以下是一个详细的示例，展示了如何实现这一功能：

基础概念

滚动事件：浏览器窗口滚动时触发的事件。
DOM操作：通过JavaScript操作HTML文档对象模型（DOM）来更改元素的样式。

类型

固定位置：当div滚动到特定位置时，保持其样式不变。
动态变化：根据滚动位置动态改变div的样式。

应用场景

页眉和页脚：在滚动时保持页眉或页脚的可见性。
侧边栏导航：高亮显示当前浏览部分的导航项。
内容区域：突出显示当前阅读的部分。

示例代码

以下是一个简单的示例，展示了如何在滚动时更改div的背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Highlight</title>
    <style>
        body {
            height: 2000px; /* 设置一个较大的高度以便测试滚动 */
        }
        #highlightDiv {
            width: 100%;
            height: 200px;
            background-color: lightblue;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="highlightDiv">Scroll to see the effect</div>

    <script>
        window.addEventListener('scroll', function() {
            var div = document.getElementById('highlightDiv');
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > 100) {
                div.style.backgroundColor = 'lightgreen';
            } else {
                div.style.backgroundColor = 'lightblue';
            }
        });
    </script>
</body>
</html>

解释

HTML结构：创建一个div元素，并赋予其ID highlightDiv。
CSS样式：设置div的基本样式，并初始化背景颜色为lightblue。
JavaScript逻辑：
- 添加一个滚动事件监听器。
- 在滚动事件触发时，获取当前滚动位置（scrollTop）。
- 根据滚动位置更改div的背景颜色：如果滚动位置超过100像素，则将背景颜色更改为lightgreen，否则恢复为lightblue。