css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现

这篇具有很好参考价值的文章主要介绍了css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现效果:
css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现,业务日报,css,前端,css3
html代码:

<div class="sidenav">
  <ul class="nav-text progressbar">
    <!-- data-target的值对应要跳转的模块的id -->
        <li data-target="module1"><div class="text">锚点名称</div></li>
        <li data-target="module2"><div class="text">锚点名称</div></li>
        <li data-target="module3"><div class="text">锚点名称</div></li>
        <li data-target="module4"><div class="text">锚点名称</div></li>
  </ul>
</div>

给要跳转的dom元素id赋值即可。

css:

/* 侧边锚点跳转 */
.sidenav {
  z-index: 40;
  left: 1%;
  bottom: 15%;
  min-height: 55px;
  position: fixed;
  /* width: 140px; */
  background: #ffffff;
  box-shadow: 0px 0px 35px 0px rgba(106, 76, 248, 0.16);
  border-radius: 8px;
  padding: 25px 22px 0px 16px;
}

.progressbar li {
  list-style-type: none;
  /* float: left; 
  width: 33.33%;  */
  position: relative;
  text-align: center;
  font-size: 16px;
  align-items: center;
  display: flex;
  height: 42px;
  max-width: 102px;
  margin-bottom: 25px;
}

.progressbar .text {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  /* width: 64px; */
  width: 80px;
  text-align: left;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
color: #333333;
cursor: pointer;
}

.progressbar li:before {
  content: "";
  text-align: center;
  width: 12px;
  height: 12px;
background: #999999;
  border-radius: 50%;
  margin-right: 10px;
}

.progressbar li:after {
  /* 伪元素实现li圆点垂直相连的线*/
  top: -13px;
  transform: translate(-50%, 0) rotate(90deg);
  content: "";
  position: absolute;
  width: 66%;
  height: 1px;
  background: #999999;;
  left: 6px;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

js:文章来源地址https://www.toymoban.com/news/detail-651279.html

 // 避免点击事件触发时,触发滚动事件增加active类的函数
    var isProgressBarClick = false;
    // 获取悬浮窗的ul元素
    const moduleList = document.querySelector('.progressbar');

    var timeoutId = null;
    // 滚动到对应模块并添加active类的点击事件处理函数
    function scrollToModule(event){
      isProgressBarClick = true;
      var aim = event.target;
      if(event.target.className === 'text'){
        aim = event.target.parentNode
      }
      const targetModuleId = aim.getAttribute('data-target');
      const targetModule = document.getElementById(targetModuleId);
      if (targetModule) {
        // 使用平滑滚动实现滚动效果
        targetModule.scrollIntoView({ behavior: 'smooth' });

        // 移除之前被添加的active类
        const activeItem = document.querySelector('.progressbar li.active');
        if (activeItem) {
          activeItem.classList.remove('active');
        }

        // 为当前点击的列表项添加active类
        aim.classList.add('active');
      }
      // 等待锚点跳转完成后再重置标志变量
      clearTimeout(timeoutId);
      timeoutId = setTimeout(function() {
        isProgressBarClick = false;
      }, 1000);
    }

    $('.progressbar li').click(scrollToModule)
    $('.progressbar li .text').click(scrollToModule)

    // 监听页面滚动事件
    window.addEventListener('scroll', handleScroll);

    
    function handleScroll() {
      if(!isProgressBarClick){
        // 获取页面滚动的垂直位置
        const scrollPosition = window.scrollY;

        // 遍历模块元素,找到当前可见的模块
        var activeModuleId = null;
        var moduleElements = document.querySelectorAll('.module_list>div')

        for (const moduleElement of moduleElements) {
          // 用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置
          const { top, bottom } = moduleElement.getBoundingClientRect();
          // 判断模块是否在视口内(至少一半在视口内)
          if (top <= window.innerHeight / 2 && bottom >= window.innerHeight / 2) {
            activeModuleId = moduleElement.id;
            break;
          }
        }

        // 添加active类
        if (activeModuleId) {
          // 移除之前被添加的active类
          const activeItem = document.querySelector('.progressbar li.active');
          if (activeItem) {
            activeItem.classList.remove('active');
          }

          // 为当前可见的模块对应的列表项添加active类
          const activeListItem = document.querySelector(`.progressbar li[data-target="${activeModuleId}"]`);
          if (activeListItem) {
            activeListItem.classList.add('active');
          }
        }
      }
    }
    // 初始加载时触发一次滚动事件
    handleScroll();

到了这里,关于css伪元素实现li列表圆点相连+锚点跳转悬浮窗实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS 实现平面圆点绕椭圆动画

    👏 CSS实现平面圆点绕椭圆动画,速速来Get吧~ 🥇 文末分享源代码。记得点赞+关注+收藏! transform-style:CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面,元素的子元素将不会有 3D 的遮挡关系。 属性 含义 flat 设置元素的子元素位于该元素的

    2024年02月11日
    浏览(38)
  • 4种方法实现html 页面内锚点定位及跳转

    不知道你有没有遇到这样的需求:锚点定位?进入页面某个元素需要出现在可视区?…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴,实现的方式有各种各样的,比如使用 scrollTop、监听滚动等等,这也是很多小伙伴第一个想到的。 今天我

    2024年02月11日
    浏览(37)
  • 【CSS】高级元素:列表、表格、表单

    列表 列表的元素 有序列表:ol、li 无序列表:ul、li 自定义列表:dl dt dd 自定义列表 dl 定义列表,直接元素只能是dt、dd dt 列表中每一项的项目名 dd 列表的每一项的具体描述 表格 table 表格 border-collapse:collapse; (塌陷的意思) tr (table row) 表格中的行 td (table data) 行中的单元格

    2024年04月08日
    浏览(51)
  • CSS 伪元素: ::marker 自定义列表序号

    伪元素 ::marker,可 作用在任何设置了 display: list-item 的元素或伪元素上,例如li和summary 。 ​ 但是,对于 ::marker 伪元素内的样式, 目前只允许使用 : all font properties -- 所以字体属性相关 colo r -- 颜色值 the content property -- content 内容,类似于 ::before 伪元素 的 content,用于填充

    2024年02月16日
    浏览(37)
  • uniapp 滚动到指定元素的位置(锚点)

    需求:在页面中,不管位于何处,点击按钮页面滚动到对应的标题位置。 最简单有效的方式(直接复制改数据就行) 使用  scroll-view 标签的属性:scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string); 点击事件(位置随便写,根据页面需求) 需要滚动到的地方

    2024年02月11日
    浏览(43)
  • 【CSS 10】浮动实例 处理布局流 display: inline-block 行内块元素 水平显示列表项 align 对齐

    浮动实例 网格/等宽的框 通过使用 float 属性,可以轻松地并排浮动内容框 display: inline-block 与 display: inline 相比,主要区别在于 display: inline-block 允许在元素上设置宽度和高度 同样,如果设置了 display: inline-block,将保留上下外边距/内边距,而 display: inline 则不会 与 display: b

    2024年02月11日
    浏览(54)
  • web前端【3】JS基础-轮播图【JavaScript、定时器、鼠标动作、自动轮播、增加和减少li列表】

    一、实验题目: 轮播图 二、实验内容简介 1.整体布局:图片、左右按钮、数字列表、添加删除按钮 2、左右箭头滚动 3、小圆点滚动 4、自动轮播 5、鼠标动作:指向和离开 6、添加与删除 三、实验过程 1. 需求分析 整体布局:设计一个轮播图,中间部分为自动轮播的图片展示

    2024年02月04日
    浏览(57)
  • CSS实现列表滚动效果

    效果: 应用场景:  1. 一个竖向列表(或横向列表)中有很多行,但是随着页面上下(或左右)滑动,整个列表会随之移动。 2.三级联动菜单,上下滑动的时候。 诸如此类... 在这里介绍一个css属性,overflow-y和overflow-x 以以下代码为例: 关于overflow-y: 当一个块级元素(div

    2024年02月05日
    浏览(34)
  • CSS基础笔记四,伪类选择器和对象选择器(鼠标点击的四种状态,列表自定义选择,容器只有一个,除了被选中的其他都有,元素为空的时候,元素获得焦点的时候,单选和复选增强)

    伪类选择器  常用有这些: 1,鼠标点击元素的4种状态 爱恨离别(link visited hover active) 前面的2个只适用于 a标签,后面的2个适用于其他标签。顺序不能改变 2,列表中先选择谁就选择谁              first-child  选择开头              last-child 选择结尾       

    2024年02月03日
    浏览(54)
  • 【CSS】禁用元素鼠标事件(例如实现元素禁用效果)

    pointer-events 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件。 实际运用中可以通过对 auto 和 none 动态控制,来动态实现元素的禁用效果。 属性 描述 auto 与pointer-events属性未指定时的表现效果相同,对于 SVG 内容,该值与visiblePainted效果相同 none 元素永远

    2024年02月12日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包