[JavaScript知识库] 利用jQuery制作一个普通网页需要注意多少细节之电梯导航

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 利用jQuery制作一个普通网页需要注意多少细节之电梯导航 -> 正文阅读

[JavaScript知识库]利用jQuery制作一个普通网页需要注意多少细节之电梯导航

一丶在相应部分显示或者隐藏电梯导航

二丶点击电梯导航页面可以滚动到相应内容区域

三丶页面滚动到某个内容区域，左侧电梯导航随之变为选中状态

节流阀（互斥锁）

HTML部分代码

jQuery代码

我们在浏览网站时，最常见到的网页类型就是像某宝一样的网页，看似简陋普通的网页，在编写程序时，需要我们注意的细节却很多，比如下面这个选截页面，我们大致分为ABCDE五个部分

?这篇文章主要讲一下关于DE两个部分的代码，即电梯导航。

什么是电梯导航呢？电梯导航就是像上述图片中最右端悬浮着的一个框，里面是分类，并且点击某一个分类后，页面会自动跳转到对应内容部分。

意思是，我在D里点一个选项，页面就会自动跳转到E部分对应我点击选项的内容，就像我点击“猜你喜欢”，那么主页面就会跳转到这部分内容。

那么现在我们把这个要求大致分为三个小任务

在相应部分显示或者隐藏电梯导航
点击电梯导航页面可以滚动到相应内容区域
页面滚动到某个内容区域，左侧电梯导航随之变为选中状态

在此之前我们先来简单认识一下待会儿会用到的代码：

var a = $(" ").offset().top;?（offset是获取当前部分相对的偏移尺寸，加上top即相对顶部的偏移）
$(document).scrollTop()? ?（scrollTop表示内容部分被页面卷去的头部，即上面超出页面的部分）
$("body, html").stop().animate({?scrollTop:??}, function() { });? （animate? scrollTop 给页面动画滚动效果）
$(" ").each(function(i, ele) {? ?（each遍历匹配每一个元素，返回 false 可用于及早停止循环）

?现在我们来做第一个任务：

一丶在相应部分显示或者隐藏电梯导航

?（如果卷去的头部尺寸大于等于当前部分相对页面顶部的偏移尺寸，就让电梯导航栏出现 ?否则电梯导航栏消失）

注意，这里在声明函数前调用了函数，如果不调用，那么刷新页面后电梯导航栏就不会出现。

    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;//offset是获取当前部分相对的偏移位置
    toggleTool();//调用toggleTool()

    function toggleTool() {
		//scrollTop表示内容部分被页面卷去的头部，即上面超出页面的部分
		//如果卷去的头部尺寸 大于等于 当前部分相对页面顶部的偏移尺寸，
		//就让电梯导航栏出现  否则电梯导航栏消失
         if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
//scroll表示滚动
    $(window).scroll(function() {
        toggleTool();

第二个任务：

二丶点击电梯导航页面可以滚动到相应内容区域

即当我们在电梯导航栏点击一个目标后，去到相应的板块，因此在这里我们借用.offset().top来获得相应的位置

并且在这里最后一行我们多做了一步，是为了让点击后的电梯导航栏目标添加上被选中的效果

 $(".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();
    })

第三个任务：

三丶页面滚动到某个内容区域，左侧电梯导航随之变为选中状态

即，我们没有通过电梯导航栏跳转，而是自行向下滑动页面，那么就需要让电梯导航栏也随之改变到相应的类别

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

                }
            })
        }

在这里为了页面的通顺和流畅，我们再引入 节流阀 这个概念，因为当我们点击电梯导航栏时，就会触发?$(window).scroll(function()这个函数，导致每点击一次就从头循环一次。

节流阀（互斥锁）

那么我们应该怎样使用呢？很简单，只要在前面加上

var flag = true;

即可。

那么现在我们来对照着看一下这部分的节选HTML函代码和jQuery代码

HTML部分代码

<div class="floor">
        <div class="jiadian w">
            <div class="box-hd">
                <h3>家用电器</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul> -->
            </div>
        </div>
        <div class="shouji w">
            <div class="box-hd">
                <h3>手机通讯</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul> -->
            </div>
        </div>
        <div class="diannao w">
            <div class="box-hd">
                <h3>电脑办公</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
                <!-- <ul class="tab-con">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul> -->
            </div>
        </div>
        <div class="jiaju w">
            <div class="box-hd">
                <h3>精品家具</h3>
                <div class="tab-list">
                    <ul>
                        <li><a href="#" class="style-red">热门</a>|</li>
                        <li><a href="#">大家电</a>|</li>
                        <li><a href="#">生活电器</a>|</li>
                        <li><a href="#">厨房电器</a>|</li>
                        <li><a href="#">个护健康</a>|</li>
                        <li><a href="#">应季电器</a>|</li>
                        <li><a href="#">空气/净水</a>|</li>
                        <li><a href="#">新奇特</a>|</li>
                        <li><a href="#">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <div class="box-bd">
                <ul class="tab-con">
                    <li class="w209">
                        <ul class="tab-con-list">
                            <li>
                                <a href="#">节能补贴</a>
                            </li>
                            <li>
                                <a href="#">4K电视</a>
                            </li>
                            <li>
                                <a href="#">空气净化器</a>
                            </li>
                            <li>
                                <a href="#">IH电饭煲</a>
                            </li>
                            <li>
                                <a href="#">滚筒洗衣机</a>
                            </li>
                            <li>
                                <a href="#">电热水器</a>
                            </li>
                        </ul>
                        <img src="upload/floor-1-1.png" alt="">
                    </li>
                    <li class="w329">
                        <img src="upload/pic1.jpg" alt="">
                    </li>
                    <li class="w219">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-2.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                    </li>
                    <li class="w220">
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-5.png" alt="">
                            </a>
                        </div>
                        <div class="tab-con-item">
                            <a href="#">
                                <img src="upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 楼层区 end -->
	<!-- 固定电梯导航 -->
	<div class="fixedtool">
	    <ul>
	        <li class="current">家用电器</li>
	        <li>手机通讯</li>
	        <li>电脑办公</li>
	        <li>精品家具</li>
	
	    </ul>
	</div>

jQuery代码

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

    function toggleTool() {
		//scrollTop表示内容部分被页面卷去的头部，即上面超出页面的部分
		//如果卷去的头部尺寸 大于等于 当前部分相对页面顶部的偏移尺寸，
		//就让电梯导航栏出现  否则电梯导航栏消失
         if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
		//scroll表示滚动
    $(window).scroll(function() {
        toggleTool();
		
		// 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();
		})
		
		
        // 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();

                }
            })
        }



    });

})

看一下效果

在这里我们最后再插入一个小功能（其实是刚才忘记写了）回到顶部！?

其实这个功能非常的简单，只需要几行代码就可以搞定

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Wellfancy</title>
    <style>
        body {
            height: 2000px;
        }
        
        .back {
            position: fixed;
            width: 50px;
            height: 50px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
        }
        
        .container {
            width: 900px;
            height: 500px;
            background-color: lightgreen;
            margin: 400px auto;
        }
    </style>
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>


<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(document).scrollTop(100);
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                $("body, html").stop().animate({
                    scrollTop: 0
                });
            })
        })
    </script>
</body>

</html>