js实现页面向下滚动时,当前页面中间的div不动,下面的div将页面中间的div覆盖
时间: 2024-02-24 22:54:07 浏览: 22
可以使用CSS中的position属性来实现这个效果。首先,设置中间的div为绝对定位,然后设置其left和top属性使其居中。接着,设置下面的div为相对定位,并设置其z-index比中间的div小,这样就可以覆盖中间的div了。
HTML代码如下:
```
<div class="container">
<div class="center">中间的div</div>
<div class="bottom">下面的div</div>
</div>
```
CSS代码如下:
```
.container {
position: relative;
height: 2000px; /* 为了让下面的div能够覆盖中间的div,需要设置一个足够大的高度 */
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #ccc;
}
.bottom {
position: relative;
z-index: 1;
width: 100%;
height: 500px;
background-color: #f00;
}
```
这样,在页面向下滚动时,下面的div会覆盖中间的div,而中间的div不会动。
相关问题
我希望检测当前是否在页面顶端,若不在在改变某个div的颜色
您可以使用JavaScript来实现这个功能。可以使用`window.pageYOffset`属性来获取当前页面的垂直滚动距离。如果这个值为0,则说明页面在顶部。如果这个值大于0,则说明页面已经向下滚动了。
以下是一个示例代码,可以检测页面是否在顶部,并在不在顶部时改变某个div的颜色:
```html
<!DOCTYPE html>
<html>
<head>
<title>页面滚动检测示例</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body onscroll="scrollFunction()">
<div id="myDiv"></div>
<script>
function scrollFunction() {
var myDiv = document.getElementById("myDiv");
if (window.pageYOffset == 0) {
myDiv.style.backgroundColor = "red";
} else {
myDiv.style.backgroundColor = "blue";
}
}
</script>
</body>
</html>
```
在这个示例中,当页面在顶部时,`myDiv`的背景色为红色,当页面向下滚动时,`myDiv`的背景色变为蓝色。
js点击盒子页面向下滚动一段距离,并且添加滚动时间
您可以使用JavaScript中的addEventListener()方法来添加点击和滚动事件,并使用scrollBy()方法来向下滚动页面。以下是一个示例代码:
HTML代码:
```
<div id="box">点击滚动</div>
```
JavaScript代码:
```
var box = document.getElementById('box');
// 添加点击事件
box.addEventListener('click', function() {
// 向下滚动500像素
window.scrollBy(0, 500);
});
// 添加滚动事件
window.addEventListener('scroll', function() {
// 滚动时触发的事件
console.log('页面正在滚动');
});
```
当您点击具有ID“box”的元素时,将向下滚动500像素。同时,当您滚动页面时,将在控制台中打印出“页面正在滚动”的消息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)