javascript - js 优化——当鼠标滚动scrollTop()大于某个值时,显示顶部的固定导航,需要频繁触发js计算,如何优化?
天蓬老师
天蓬老师 2017-04-10 15:41:31
[JavaScript讨论组]

页面打开不滚动时如下:

当滚动超过一定长度时,假设超过60px,显示搜索栏,如下:

目前我知道的做法仅限于此:


$(function() {
    $(window).scroll(function() {
        var scrollHeight = $(document).scrollTop();
        if (scrollHeight > 60 px) {
            $('#targetBar').addClass('lighted');
        } else {
            $('#targetBar').removeClass('lighted');
        }
    });
})

CSS部分如下:



.lighted {position:fixed;top:0px;transition:all .5s;box-shadow......}

这种设计还是挺好的,百度搜索结果也在用,问题是:

只要有鼠标滚动就会触发该js并计算是不是符合条件,从网页优化的角度来说肯定不是很好的解决方案,有没有熟悉这个功能的朋友,帮忙指点下,有没有更好的解决方案?

谢谢

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
伊谢尔伦

其实这种可以有现成的插件来完成比如这个

另外回答你的问题: 只要有鼠标滚动就会触发该js并计算是不是符合条件,从网页优化的角度来说肯定不是很好的解决方案 ?

就目前来说,除了这一种方式,也想不出更好的办法来。其实开发中很多事件也是这种方式。比如事件委托。当我们将事件委托在 document 上的时候,委托在任何非直接事件触发元素时都是类似的一个机制。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号