电梯导航栏的实现

这篇具有很好参考价值的文章主要介绍了电梯导航栏的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

点击跳到指定位置类似于电梯导航
电梯导航栏的实现

.w {
	width: 1200px;
	margin: 0 auto;
}
.fixedtool {
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -676px;
    width: 66px;
    background-color: #fff;
    display: none;
}

.fixedtool li {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

.fixedtool .current {
    background-color: #c81623;
    color: #fff;
}
 <div class="fixedtool">
        <ul>
            <li class="current">家用电器</li>
            <li>手机通讯</li>
            <li>电脑办公</li>
            <li>精品家具</li>

        </ul>
    </div>

分析:
① 当我们滚动到 今日推荐 模块,就让电梯导航显示出来

$(function(){
var toolTop = $(".recommend").offset().top;
 if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
})

② 点击电梯导航页面可以滚动到相应内容区域
③ 核心算法:因为电梯导航模块和内容区模块一一对应的
④ 当我们点击电梯导航某个小模块,就可以拿到当前小模块的索引号
⑤ 就可以把animate要移动的距离求出来:当前索引号内容区模块它的offset().top
⑥ 然后执行动画即可

  // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        //console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        });
    })
})

刷新页面时发现电梯导航不见了,是因为只有在页面滚动的时候才加载动画,为了避免这种情况的出现,我们可以封装成一个函数,只要加载完成就调用这个函数,在页面滚动的时候也调用这个函数。

 toggleTool();
    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

⑦ 当我们点击电梯导航某个小li, 当前小li 添加current类,兄弟移除类名

  // 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名
$(this).addClass("current").siblings().removeClass();

⑧ 当我们页面滚动到内容区域某个模块, 左侧电梯导航,相对应的小li模块,也会添加current类, 兄弟移除current类。
⑨ 触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。
⑩ 需要用到each,遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号
⑪判断的条件: 被卷去的头部 大于等于 内容区域里面每个模块的offset().top
⑫就利用这个索引号找到相应的电梯导航小li添加类

  // 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                }
            })

当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current,可以使用节流阀(互斥锁)来控制
整合所有代码文章来源地址https://www.toymoban.com/news/detail-428162.html

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();

    function toggleTool() {
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }

    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名


        if (flag) {
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }



    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后,让当前的小li 添加current 类名 ,兄弟节点移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

到了这里,关于电梯导航栏的实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • css 实现电梯导航

    实现原理:利用css实现电梯导航很简单,基本原理就是通过a标签绑定跳转目标的id来实现的   html代码: css代码: 效果演示:

    2024年02月12日
    浏览(32)
  • 智能导航:教你轻松用JavaScript实现网页电梯导航功能

    提示:本文为原创内容 文章目录 前言 二、功能实现 1.页面效果图 2.HTML部分 3.CSS部分 4.JavaScrip部分 5.整体代码 总结  在当前的网络时代,用户体验已经成为了前端开发的重点关注领域。由于移动设备的广泛使用,用户在阅读长篇内容时可能会感到操作不便。然而,电梯导航

    2024年01月16日
    浏览(50)
  • DEDECMS实现多行导航菜单栏的实现方法

    实现织梦dedecms模板的多行导航菜单需要分两个步骤进行。 首先改图片。templetsimagesheader_bg.png 用PHOTOSHOP更改成你喜欢的导航栏样式。最简单偷懒的方法是打开这个图片然后选中底下那一段大约33象素的图,重新生成一个33象素的图片即可。或者稍微改下颜色什么的,随你的想

    2024年02月03日
    浏览(34)
  • pyautogui获取鼠标位置及循环点击指定位置按钮

    pip install pyautogui可能会安装失败,需要先下载包再按照。 由于本机利用的是anconda里的python环境,所以下载后的安装步骤为: 下载包至本地:PyAutoGUI-0.9.53.tar.gz 下载地址 cd 至包下载目录下 执行命令 conda install --use-local PyAutoGUI-0.9.53.tar.gz -n base 对应含义: conda install --use-local 包文

    2024年02月11日
    浏览(103)
  • 详解DEDECMS 多行导航菜单栏的实现方法

    解决的具体方法,首先改图片。templetsimagesheader_bg.png 用PHOTOSHOP更改成你喜欢的导航栏样式。最简单偷懒的方法是打开这个图片然后选中底下那一段大约33象素的图,重新生成一个33象素的图片即可。或者稍微改下颜色什么的,随你的想象去改。 同时注意更改header_hover.png这个

    2024年02月02日
    浏览(38)
  • Android Jetpack Compose之底部导航栏的实现

    写过一段Android jetpack compose 界面的小伙伴应该都用过Compose的脚手架 Scaffold ,利用它我们可以很快的实现一个现代APP的主流界面架构,即一个带顶部导航栏和底部导航栏的界面架构,我们基于这个架构可以快速的搭建出我们想要的页面效果。而今天的文章就是要介绍如何实现

    2024年03月23日
    浏览(52)
  • 如何使用js自动点击电脑屏幕指定位置

    可以使用 JavaScript 模拟鼠标点击事件来实现自动点击屏幕指定位置。 你可以使用 document.createEvent() 方法创建一个 \\\"MouseEvents\\\" 事件对象,然后使用 dispatchEvent() 方法将该事件分派到文档中的元素上。 下面是一个简单的示例,展示了如何在屏幕上的 (100, 100) 位置自动点击一次。

    2024年02月11日
    浏览(40)
  • 【微信小程序点击滚动页面到指定位置】

    scroll-view :https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 补充: 1: scroll-view设置高度:style=“height:100%” 2: scroll-view设置纵向滚动:scroll-y=“true” 3: scroll-view设置要去的id( 这个必须动态设置才生效 ):scroll-into-view=“{{toView}}”

    2024年02月09日
    浏览(39)
  • android : 底部导航栏的实现(使用ViewPager和BottomNavigationView)

      本案例中需要用的控件ViewPager和BottomNavigationView ViewPager:主要是页面的切换 Fragment:碎片(也就是每个页面的内容) BottomNavigationView:底部导航栏 非常简单,主要就是一个Viewpager和BottomNavigationView 先来说一下思路:BottomNavigationView底部导航栏   ViewPager+Fragment页面        

    2024年02月03日
    浏览(42)
  • Threejs进阶之十:让模型移动到鼠标点击的指定位置

    上一节中我们实现了物体沿指定轨迹移动的动画效果,这一节我们来实现让模型移动到鼠标点击的制定位置的动画效果。 先看下实现后的最终效果 要实现上面的动画效果,我们需要通过以下步骤来实现 我们需要监听鼠标的点击事件,获取鼠标点击点相对浏览器可视区域左上

    2024年02月09日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包