jquery：鼠标滚轮滑动后出现固定条

最新推荐文章于 2022-02-12 00:10:22 发布

Icon_酱

最新推荐文章于 2022-02-12 00:10:22 发布

阅读量674

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js jquery 文章标签： jquery js

本文链接：https://blog.csdn.net/yytIcon/article/details/79034361

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

jquery

7 篇文章

订阅专栏

本文介绍了一种模仿百度搜索框效果的方法。当用户滚动页面时，搜索框会动态显示或隐藏，通过JavaScript来实现这一功能。具体步骤包括计算搜索框初始位置、监听滚动事件并据此调整CSS。

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

今天分享一个小知识，仿百度搜索框效果
先看图
这里写图片描述
刚进入页面时，页面上是一个固定的搜索框，当鼠标滑动后，该框就出现了。

代码

 <script type="text/javascript">
        $(function () {
            var height = $("#title").offset().top;//计算该框离浏览器顶部的距离
            $(window).scroll(function () {//鼠标滑动事件
                var scrollTop = $(this).scrollTop();//获取当前离浏览器顶部的距离
                if (scrollTop > height) {//判断距离
                    $("#topTitle").css({
                         //写你需要看到效果的css
                    });

                } else {
                    $("#topTitle").css({
                        //写你需要看到效果的css
                    });
                }

            });
        });
    </script>