我在页面横幅下有一个水平菜单栏。栏上有一个圆形 div。当用户向下滚动时,菜单会粘在页面顶部。我试图弄清楚当菜单栏到达顶部时如何缩小圆形 div。
CSS
.type1 {
border-radius: 50%;
width: 150px;
height: 150px;
background: yellow;
border: 3px solid red;
overflow:hidden;
position: absolute;
left: 300px;
z-index: 1;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:2;
}
.divbox2 {
text-align: left;
width:1000px;
height:100px;
background-color:red;
position: absolute;
left: 0px;
}
HTML
<div style="height:200px;background: green"></div>
<div class="sticky">
<div class="divbox2"></div>
<div class="type1"></div>
</div>
<img src="tillyimages/images/Terracotta Lego.jpg">
<img src="tillyimages/images/Terracotta Lego.jpg">
我不确定这是否可以用纯 CSS 或 JS 来完成。
这是使用 JavaScript 的解决方案。
向页面添加一个事件侦听器
scroll
事件,检查我们是否滚动超过 200px(标题的高度),如果为 true,则我们向圆圈的父容器添加一个 .shrink
类。
调整 CSS,应用新的圆形样式,然后添加
.shrink
类。这是通过 .shrink .type1
选择器完成的。
查看下面的交互式演示和相应的代码。
document.addEventListener('scroll', event => {
console.log(window.scrollY)
if (window.scrollY > 200) {
document.querySelector('.sticky').classList.add('shrink')
} else {
document.querySelector('.sticky').classList.remove('shrink')
}
})
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:2;
}
.divbox2 {
text-align: left;
width:1000px;
height:100px;
background-color:red;
position: absolute;
left: 0px;
}
.type1 {
border-radius: 50%;
width: 150px;
height: 150px;
background: yellow;
border: 3px solid red;
overflow:hidden;
position: absolute;
left: 300px;
z-index: 1;
transition: all 0.3s;
}
.shrink .type1 {
height: 50px;
width: 50px;
}
<div style="height:200px;background: green"></div>
<div class="sticky">
<div class="divbox2"></div>
<div class="type1"></div>
</div>
<img src="https://www.bb2002.com/tillyimages/images/Terracotta Lego.jpg">
<img src="https://www.bb2002.com/tillyimages/images/Terracotta Lego.jpg">