JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

下面是JS+CSS实现带有碰撞缓冲效果的竖向导航条的完整攻略。

下面是JS+CSS实现带有碰撞缓冲效果的竖向导航条的完整攻略。

竖向导航条的HTML结构

我们的竖向导航条需要有以下几个元素：

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

其中，每一个li标签对应一个导航项目。我们可以根据实际情况添加、删除或修改li标签。

CSS样式

首先，将我们的导航条设置为position: fixed以固定在页面右侧：

ul {
  position: fixed;
  top: 50%;
  right: 40px; /* 页面右侧距离为40px */
  transform: translateY(-50%);
}

为了让导航条看起来更加美观，我们可以添加一些CSS样式，比如：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f2f2;
}

a {
  color: #333;
  text-decoration: none;
}

JS代码

我们需要使用JS代码来实现碰撞缓冲的效果。以下是代码的基本逻辑：

1. 获取所有的导航项目和其他页面元素（如页脚）。

const navItems = document.querySelectorAll("li")
const otherElements = document.querySelectorAll(".other-elements")

1. 获取所有元素的位置信息。

const positions = []
navItems.forEach(item => {
  positions.push({
    top: item.offsetTop,
    height: item.offsetHeight
  })
})
otherElements.forEach(element => {
  positions.push({
    top: element.offsetTop,
    height: element.offsetHeight
  })
})

1. 当窗口滚动时，检查导航条是否与其他元素相撞。

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset
  positions.forEach((pos, index) => {
    if (scrollTop >= pos.top && scrollTop <= pos.top + pos.height) {
      setFixedNav(index) // 修改CSS样式
    }
  })
})

1. 碰撞时，使用setFixedNav()函数来修改导航条的CSS样式，实现缓冲效果。

function setFixedNav(index) {
  navItems.forEach((item, i) => {
    if (i === index) {
      item.classList.add("fixed")
    } else {
      item.classList.remove("fixed")
    }
  })
}

1. 在CSS中添加.fixed样式来表示导航项目处于固定状态。

.fixed {
  position: fixed;
  right: 50px; /* 向右移动50px */
}

示例代码

以下是一个简单的示例代码，我们可以通过修改CSS和JS代码来实现不同的样式和效果。

HTML代码：

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

<div class="other-elements">
  <h1>Some other content</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS代码：

ul {
  position: fixed;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 5px;
  background-color: #f2f2f2;
  transition: all 0.3s ease-in-out;
}

a {
  color: #333;
  text-decoration: none;
}

.fixed {
  position: fixed;
  right: 50px;
}

JS代码：

const navItems = document.querySelectorAll("li")
const otherElements = document.querySelectorAll(".other-elements")

const positions = []
navItems.forEach(item => {
  positions.push({
    top: item.offsetTop,
    height: item.offsetHeight
  })
})
otherElements.forEach(element => {
  positions.push({
    top: element.offsetTop,
    height: element.offsetHeight
  })
})

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset
  positions.forEach((pos, index) => {
    if (scrollTop >= pos.top && scrollTop <= pos.top + pos.height) {
      setFixedNav(index)
    }
  })
})

function setFixedNav(index) {
  navItems.forEach((item, i) => {
    if (i === index) {
      item.classList.add("fixed")
    } else {
      item.classList.remove("fixed")
    }
  })
}

通过修改.fixed样式和setFixedNav()函数，我们可以实现不同的缓冲效果和样式。同时，也可以添加更多的HTML元素来实现更复杂的布局和效果。