资讯专栏INFORMATION COLUMN

Javascript页面滚动时导航智能定位

lily_wang / 3471人阅读

摘要:常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。

假设结构如下:

section1
section2
section3
section4
section5
页面滚动时导航定位

js代码如下:

var $navs = $("nav a"),                    // 导航
    $sections = $(".section"),             // 模块
    $window = $(window),
    navLength = $navs.length - 1;
    
$window.on("scroll", function() {
    var scrollTop = $window.scrollTop(),
        len = navLength;

    for (; len > -1; len--) {
        var that = $sections.eq(len);
        if (scrollTop >= that.offset().top) {
             $navs.removeClass("current").eq(len).addClass("current");
             break;
        }
    }
});

效果如下:

不难看出,基本原理就是在window滚动的时候,依次将模块从后向前遍历,如果window的滚动高度大于或等于当前模块的距页面顶部的距离,则将当前模块对应的导航突出显示,并且不再继续遍历

点击导航定位页面

除了这种需求外,还有另一种需求,就是点击导航定位到导航所对应模块的顶部。

代码如下:

$navs.on("click", function(e) {
    e.preventDefault();
    $("html, body").animate({
        "scrollTop": $($(this).attr("href")).offset().top
    }, 400);
});

效果如下:

以上基本上满足了业务的基本需求,这是工作中总结的经验,仅供参考,有错误请指出,谢谢!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50729.html

相关文章

  • Javascript页面滚动导航智能定位

    摘要:常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。 常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。 假设结构如下: section1 ...

    philadelphia 评论0 收藏0
  • 67 个拯救前端开发者的工具、库和资源

    摘要:库一个用来在中创建炫酷的浮动粒子的库一个用来在中创建物体和空间的库快速实现全屏滚动特性打字机效果滚动到某个元素位置时触发一个功能语法高亮使用创建漂亮的图表能够明显加速网站加载时间,鼠标时预加载资源另一个图表库一个基于动画和平移的雪碧图库实现 Javascript 库 Particles.js  一个用来在 web 中创建炫酷的浮动粒子的库 Three.js  一个用来在 web 中创...

    XiNGRZ 评论0 收藏0
  • vue使用原生js实现滚动页面跟踪导航高亮

    摘要:需要使用做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加,其他去掉进行样式切换。 需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换。 ...

    bluesky 评论0 收藏0
  • vue使用原生js实现滚动页面跟踪导航高亮

    摘要:需要使用做一个专题页面。滚动页面指定区域导航高亮。监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加,其他去掉进行样式切换。 需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换。 ...

    YanceyOfficial 评论0 收藏0

发表评论

0条评论

lily_wang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<