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元素来实现更复杂的布局和效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS+CSS实现带有碰撞缓冲效果的竖向导航条代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 基于vue的换肤功能的示例代码

    下面是“基于Vue的换肤功能的示例代码”的完整攻略: 一、示例代码说明 1.1 效果预览 用户可以通过点击不同的按钮,切换应用的主题风格。 1.2 代码实现 html代码部分: <template> <div :class="theme"> <p>当前主题:{{theme}}</p> &lt…

    css 2023年6月10日
    00
  • python+selenium 定位到元素,无法点击的解决方法

    下面是关于“Python+Selenium定位到元素无法点击”的解决方法的完整攻略: 1. 确认元素被正确定位且在可见范围内 当我们使用Selenium定位元素时,往往会遇到相应元素无法点击的情况。这时我们首先需要确认元素是否被正确定位,且是否在可见范围内。我们可以通过以下代码来判断元素是否被正确定位: element = driver.find_eleme…

    css 2023年6月10日
    00
  • vscode安装使用的详细教程

    VS Code安装使用的详细教程 下载安装 首先我们需要下载VS Code安装包,可以在VS Code官网(https://code.visualstudio.com/)上直接下载,也可以使用终端命令进行下载和安装。以下是在终端(MacOS或Linux系统)中通过命令行下载并安装的步骤: # 下载安装包 wget -O vscode.deb https://…

    css 2023年6月9日
    00
  • CSS Position 使用详细小结

    关于CSS Position的使用详细小结,我会结合示例来进行讲解,以下是总结: 学习CSS Position CSS Position 在CSS中,Position属性用于设置元素的定位方式。Position属性可以让元素相对于它的容器以及文档本身来进行定位,同时它也是实现一些高级布局的重要手段。 CSS Position属性有如下取值: static(默…

    css 2023年6月9日
    00
  • css布局绝对定位下margin失效的解决方法

    当使用CSS的绝对定位(position:absolute)进行布局时,某些情况下会遇到margin属性失效的问题。我们通常可以采用以下两种解决方案: 1. 使用top、right、bottom、left属性代替margin 我们可以使用绝对定位的四个常用属性:top、right、bottom和left来控制元素的位置,它们可以替代margin属性。例如: …

    css 2023年6月10日
    00
  • vue实现消息无缝滚动效果

    下面是 vue 实现消息无缝滚动效果的攻略: 目录 准备工作 实现无缝滚动的思路 示例说明 结束语 准备工作 在开始实现消息无缝滚动效果前,需要准备以下工作: 安装 Vue。你可以通过 Vue 官网 进行下载和安装。 安装 Vue-cli。你可以通过 npm 或者 Yarn 来安装 Vue-cli。具体可参考 Vue-cli 官网。 实现无缝滚动的思路 创建…

    css 2023年6月10日
    00
  • 全面总结使用CSS实现水平垂直居中效果的方法

    全面总结使用CSS实现水平垂直居中效果的方法 实现一个元素在容器中水平垂直居中一直是前端开发过程中需要面对的一个难题,这里将总结一些常见的方法。 方法一:使用flex布局实现 flex布局可以很方便的实现一个元素在容器中居中,下面是实现水平垂直居中效果的代码: .container { display: flex; justify-content: cent…

    css 2023年6月10日
    00
  • 常用的新闻列表代码(ul/li布局方式)

    常用的新闻列表代码采用的是ul/li布局方式,是一个非常通用的排版方式。以下是使用该方式的标准代码示例: <ul> <li>新闻一</li> <li>新闻二</li> <li>新闻三</li> </ul> 在上面的代码中,<ul>表示无序列表,<…

    css 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部