在不使用JQuery的情况下在滚动位置更改div样式

在不使用jQuery的情况下，在滚动位置更改div样式，可以通过原生JavaScript来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDiv {
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            top: 0;
            transition: background-color 0.5s;
        }
    </style>
</head>
<body>
    <div id="myDiv"></div>

    <script>
        window.addEventListener('scroll', function() {
            var myDiv = document.getElementById('myDiv');
            var scrollPosition = window.scrollY;

            if (scrollPosition > 100) {
                myDiv.style.backgroundColor = 'blue';
            } else {
                myDiv.style.backgroundColor = 'red';
            }
        });
    </script>
</body>
</html>

在上述代码中，我们创建了一个id为"myDiv"的div元素，并设置了初始样式。通过addEventListener方法，我们为window对象添加了一个scroll事件监听器。当滚动发生时，事件处理函数会根据滚动位置来更改div的背景颜色。

在这个示例中，当滚动位置超过100像素时，div的背景颜色会变为蓝色，否则为红色。我们使用了原生JavaScript的getElementById方法来获取div元素，并使用style属性来更改其样式。

这个示例中没有使用jQuery，而是使用了原生JavaScript来实现滚动位置更改div样式的效果。

腾讯云相关产品和产品介绍链接地址：