jQuery-前端楼层导航效果代码

xyc

现在很多电商网站都使用了楼层导航的效果，效果的原理主要是用鼠标的滚动事件和元素高度的应用。下面是整理的代码，源码粘贴如下，感兴趣的可以下载源码可直接使用。
效果展示：


1.css样式

[CSS] 纯文本查看 复制代码

* {
                                margin: 0;
                                padding: 0;
                        }
                        
                        #container {
                                width: 900px;
                                margin: 0 auto;
                        }
                        
                        #container>* {
                                width: 100%;
                        }
                        
                        .header {
                                height: 2000px;
                                background: red;
                        }
                        
                        .item {
                                height: 1000px;
                                font: bold 25px/30px "微软雅黑";
                        }
                        
                        .footer {
                                height: 500px;
                                background: red;
                        }
                        
                        #nav {
                                width: 100px;
                                position: fixed;
                                left: 20px;
                                bottom: 300px;
                                list-style: none;
                                display: none;
                                cursor: pointer;
                        }
                        
                        #nav li {
                                height: 35px;
                                line-height: 35px;
                                border-bottom: 1px dashed #ccc;
                                text-align: center;
                                position: relative;
                                font-size: 25px;
                                margin-top: 1px;
                        }
                        
                        #nav li span {
                                position: absolute;
                                display: inline-block;
                                height: 35px;
                                line-height: 35px;
                                width: 100%;
                                text-align: center;
                                left: 0;
                                top: 0;
                                display: none;
                                background: #f00;
                                color: #fff;
                        }

2.HTML 代码

[HTML] 纯文本查看 复制代码

<div id="container">
                        <div class="header">header</div>
                        <div class="main">
                                <div class="item" style="background: palegreen;">1F</div>
                                <div class="item" style="background: pink;">2F</div>
                                <div class="item" style="background: blueviolet;">3F</div>
                                <div class="item" style="background: orange;">4F</div>
                                <div class="item" style="background: greenyellow;">5F</div>
                                <div class="item" style="background: red;">6F</div>
                                <div class="item" style="background: yellow;">7F</div>
                        </div>
                        <div class="footer">footer</div>
                </div>
                <div>
                        <ul id="nav">
                                <li>1F<span style="display: inline-block;" class="active">1楼</span></li>
                                <li>2F<span>2楼</span></li>
                                <li>3F<span>3楼</span></li>
                                <li>4F<span>4楼</span></li>
                                <li>5F<span>5楼</span></li>
                                <li>6F<span>6楼</span></li>
                                <li>7F<span>7楼</span></li>

                        </ul>

                </div>

3.js 代码

[JavaScript] 纯文本查看 复制代码

$(function() {
                                var winHeight = $(window).height(), //获取浏览器可是窗口的盖度
                                        headerHeight = $('.header').height(), //获取header的高度
                                        onOff = false; //布尔值变量,通错这个变量可以防止快速连续点击的时候出现的连续滚动

                                $(window).on('scroll', function() {

                                        var scTop = $(window).scrollTop(); //获取滚动条的滚动距离

                                        //当楼侧开始出现时显示楼层导航条

                                        if(scTop >= headerHeight - winHeight) {
                                                $('#nav').show(400); //也可以不传参数，传参数表示运动时间
                                        } else {
                                                $('#nav').hide(400);
                                        }
                                        //滚动时切换显示楼层
                                        if(!onOff) {
                                                $('.item').each(function(index, element) {
                                                        var _top = $(this).offset().top;
                                                        //当每层楼的最上面滚动到浏览器窗口的中间时切换导航条的显示
                                                        if(scTop >= _top - winHeight / 2) {
                                                                //此处添加active类样式并不是改变显示样式，而是为了标当前所在的楼层
                                                                $('#nav>li').eq(index).addClass('active').children().show()

                                                                        .end().siblings().removeClass('active').children().hide();

                                                        }

                                                });

                                        }

                                })

                                $('#nav>li').hover(function() {

                                        $(this).children().show();

                                }, function() {

                                        //此处用到.not('.active')来过滤当前楼层，鼠标移开时仍然保持当前的显示样式

                                        $(this).not('.active').children().hide();

                                }).on('click', function() {

                                        onOff = true; //将开关变量onOff置为true

                                        var index = $(this).index(), //获取当前电机的li的索引

                                                _top = $('.item').eq(index).offset().top; //获取相对于的楼层到文档顶部的距离

                                        $(this).addClass('active').children().show().end()

                                                .siblings().removeClass('active').children().hide();
                                        $('html,body').animate({
                                                'scrollTop': _top
                                        }, 400, function() {

                                                onOff = false; //在运动执行完毕的毁掉函数中将onOff的值重置为false

                                        });
                                });

                        });

以上是全部代码，下载源码，请点击》》 楼层导航.zip (30.31 KB, 下载次数: 0)

2021-6-16 16:48 上传

点击文件名下载附件
楼层导航
阅读权限: 90

范范

支持下， 粘个效果展示会更好

站长苏飞