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日

相关文章

  • CSS网页布局时常犯的几种小错误小结

    针对“CSS网页布局时常犯的几种小错误小结”,以下是完整攻略: 标题 什么是CSS网页布局? Web布局是构建Web页面的过程,它涉及到将HTML元素放置在页面上,并确定它们的大小、位置和排列方式等。 CSS是样式表语言,它被用来描述Web页面的布局和外观。在设计网页布局时要使用正确的CSS属性,并避免常见的错误。 常见的CSS网页布局错误 1. 不正确地使…

    css 2023年6月10日
    00
  • 原JS实现banner图的常用功能

    下面我将详细讲解原JS实现banner图的常用功能的完整攻略。 1. 常用功能介绍 在实现banner图过程中,以下是一些常用的功能: 1.1 图片轮播 图片轮播是banner图的核心功能,它可以通过设置图片列表和定时器来实现。轮播过程可以采用两种方式:水平轮播和垂直轮播。图片轮播一般会包含以下功能: 自动轮播:按照一定时间间隔自动切换图片 手动切换:用户可…

    css 2023年6月10日
    00
  • 常用CSS集合

    常用CSS集合 介绍 在web开发中,CSS是一种用于描述HTML文档样式表现的语言,通过为HTML元素添加样式来控制其外观、布局和交互效果。本文旨在介绍常用的CSS样式,以及如何使用它们来构建美观而功能丰富的网页。 常用样式 文本样式 字体样式 CSS中通过font系列样式来控制字体大小、颜色、样式等。例如: /* 设置字体大小为16像素,字体颜色为红色,…

    css 2023年6月9日
    00
  • CSS中Float(浮动)相关技巧文章

    下面是关于“CSS中Float(浮动)相关技巧文章”的完整攻略: 1. 浮动(Float)是什么? 浮动是CSS中一种基本的定位机制,它可以实现元素的左右浮动,使文本围绕图像等对象布局,同时也可以实现多栏布局等效果。 2. 如何使用浮动? 可以通过CSS的float属性实现元素的浮动定位。float属性可取的值包括left、right、none和inheri…

    css 2023年6月10日
    00
  • CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

    实现兼容性的渐变背景效果是Web前端开发中一个比较重要的课题,因为不同的浏览器对于CSS3渐变背景效果的支持程度不太一样,有些浏览器并不支持CSS3的渐变背景效果,因此需要我们进行一定的兼容性处理。下面是一个实现CSS兼容性的渐变背景效果的攻略,供大家参考: 一、背景知识 CSS3渐变背景效果 CSS3渐变背景是一种使用简单的CSS语法来实现渐变效果的技术,…

    css 2023年6月9日
    00
  • 如何去掉内联样式 通过style属性定义的(element.style)

    如何去掉使用style属性定义的内联样式是前端开发中一个常见需求。以下是完整的攻略: 1. 使用JavaScript 在JavaScript中可以通过使用element.style来获取到元素的内联样式。我们可以使用element.style.property = ”来清空某一属性的内联样式。 示例1:清空段落元素P的背景颜色样式: let p = doc…

    css 2023年6月9日
    00
  • 关于遇到的浏览器兼容问题及应对方法(推荐)

    关于遇到的浏览器兼容问题及应对方法(推荐) 在开发网页过程中,经常会遇到浏览器兼容性问题,由于不同浏览器对网页渲染的支持和代码解析存在差异,造成了网页在不同浏览器上显示效果不同的问题。本文将会详细讲解的一些典型的浏览器兼容性问题及对应的解决方法。 1. CSS3 属性的兼容性问题 CSS3 的有些属性在低版本的浏览器中不被支持,造成网页的兼容性问题。下面是两…

    css 2023年6月10日
    00
  • 一个精简的JS DIV层tab切换代码

    下面是一个精简的JS DIV层tab切换代码的完整攻略。 什么是DIV层tab切换? 在网站中,为了将内容进行分类,我们会将内容放在不同的tab标签中,这些标签可以通过切换来显示不同的内容区域。而DIV层tab切换就是一种常见的实现方式,它基于DIV层和JavaScript代码来完成。 如何实现DIV层tab切换? 首先,我们需要在HTML中添加DIV标签,…

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