导航栏吸顶 vs 滚动定位

最新推荐文章于 2021-10-02 22:00:51 发布

艳艳啊

最新推荐文章于 2021-10-02 22:00:51 发布

阅读量261

点赞数 2

分类专栏： jq 工具专栏文章标签：定位 js

本文链接：https://blog.youkuaiyun.com/weixin_45132713/article/details/112982511

版权

工具专栏同时被 2 个专栏收录

3 篇文章

订阅专栏

2 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JS配合Swiper库实现页面滚动时导航栏吸附与高亮，以及点击导航时跳转并定位到对应模块的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求描述：

实现导航滚动过banner之后吸顶，点击导航后定位到对应模块，滚动到对应模块后导航对应区域实现高亮效果~~~

html+css+js
swiper+jq

使用html+swiper实现页面布局

       <div class="nav_wrap">
                            <div class=" nav nav_box2  clearfix swiper-container ">
                                <div class="swiper-wrapper">
                                    <a href="javascript:;" type="cj" class="swiper-slide fl">初级专场</a>

                                    <a href="javascript:;" type="zk" class="swiper-slide fl on">注会专场</a>

                                </div>
                                <a href="javascript:;" class="prev"><img src="./images/left1.png" alt=""></a>
                                <a href="javascript:;" class="next">
                                    <img src="./images/right1.png" alt="">
                                </a>
                            </div>
                        </div>

页面下半部分写出各个板块，class类以a标签的type属性命名。如下：

                            <div class="cj hide clearfix">
                            </div>
                              <div class="zk on clearfix">
                            </div>

css部分
具体的样式自己写哈~~~~

.hide{display:none;}
.on{font-size:18px;color:#c00d0b;width:189px!important;height:70px;
background:url(../images/on.png) no-repeat center !important;background-size:100%;}/*导航选中高亮的样式*/

js部分
分析：

点击导航定位到对应模块
点击导航高亮
滚动大于banner时吸顶
滚动到对应模块时导航栏对应高亮

      var mySwiper=new Swiper(' .nav_box2', {
                    slidesPerView: 'auto',
                    spaceBetween: 25,
                    observer: true,
                    observeParents: true,
                    navigation: {
                        nextEl: '.next',
                        prevEl: '.prev',
                    }
                })
      var _body = $("body");
            // 顶部导航栏切换定位
            _body
                .on({
                    "click": function () {
                        var t = $(this),
                            type = t.attr('type'),
                            navh = $('.nav').outerHeight();
                        $('html,body').animate({
                            scrollTop: $("." + type).offset().top - navh - 50
                        }, 10, function () {
                            t.addClass('on').siblings().removeClass('on');
                                      if(index>0){
                            mySwiper.slideTo(index,0,false);
                        }
                        })
                    }
                }, '.nav_box2  a')




   function loadStatic() {
  
            // 导航滚动切换
            var winh = document.documentElement.clientHeight,
                navh = $('.nav').outerHeight(),
                scrollh = $('.nav').position().top;

            tool.scroll(function (f) {
                // 随屏
                $('.floors').toggle(f >= scrollh)
                // 滚动定位
                $('.floor').each(function (index, item) {
                    if (f > $(item).offset().top - navh - 60) {
                        $('.nav_box2 a').eq(index).addClass('on').siblings().removeClass('on')
                    }

                })
            })
        }
        loadStatic();