在最终位置时调整粘性元素的大小

Question

我在页面横幅下有一个水平菜单栏。栏上有一个圆形 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 来完成。

Answer 1

这是使用 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">