滚动时将sticky粘性导航栏border-radius修改为0的实现方案

1. 先补充CSS样式 #

你只需要在现有CSS的基础上新增一个滚动状态的类，还可以加过渡效果让切换更顺滑：

.top {
  /* 你原来的.top样式保留不动 */
  /* 新增过渡属性，让圆角变化更自然，不需要可以删掉 */
  transition: border-radius 0.2s linear;
}

/* 新增滚动后的样式类 */
.top.scrolled {
  border-radius: 0 0 0 0;
}

2. 添加极简JS代码 #

把下面这段原生JS代码放在你HTML文件的</body>标签之前即可，不需要额外配置、也不需要引入第三方库：

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  const navBar = document.querySelector('.top');
  // 页面滚动距离大于1px时切换样式，回到顶部自动恢复
  window.scrollY > 1 ? navBar.classList.add('scrolled') : navBar.classList.remove('scrolled');
});

效果说明 #

修改完成后刷新页面，滚动页面时导航栏的圆角会自动从35px 35px 0 0切换为0，滚动回页面顶部时会自动恢复初始圆角，过渡动画可以根据自己的喜好调整CSS里transition的参数。如果你后续把滚动容器改成了board内部滚动，只需要把代码里的window替换成你绑定滚动的容器元素即可。

内容的提问来源于stack exchange，提问作者sunny chamberlin