下面是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代码来实现碰撞缓冲的效果。以下是代码的基本逻辑:
- 获取所有的导航项目和其他页面元素(如页脚)。
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) // 修改CSS样式
}
})
})
- 碰撞时,使用
setFixedNav()
函数来修改导航条的CSS样式,实现缓冲效果。
function setFixedNav(index) {
navItems.forEach((item, i) => {
if (i === index) {
item.classList.add("fixed")
} else {
item.classList.remove("fixed")
}
})
}
- 在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元素来实现更复杂的布局和效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS+CSS实现带有碰撞缓冲效果的竖向导航条代码 - Python技术站