吸顶条 ---- jQ写法

Posted Booo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了吸顶条 ---- jQ写法相关的知识,希望对你有一定的参考价值。

<script>
    $(function () {
        var barTop = $(#bar).offset().top;
        //on方法相当于原生的绑定
        $(window).on(scroll,function () {
            var scrollTop = $(document).scrollTop();
            if (scrollTop >= barTop) {
            //固定在上方
                $(#bar).css({position: fixed,top: 0});
                // 显示替代的条
                $(#replace_bar).css(display,block);
            } else {
                $(#bar).css(position,static);
                // 隐藏替代的条
                $(#replace_bar).css(display,none);
            }
        });
    });
</script>

 

以上是关于吸顶条 ---- jQ写法的主要内容,如果未能解决你的问题,请参考以下文章

如何让table 表头随着滚动条滚动? 达到覆盖效果。 JS 、JQ大神求帮忙。

网站的导航条下的指示器

原生js实现导航栏吸顶

前端实现div标签p标签等吸顶效果Vue+原生JS组合写法

原生js吸顶式导航条

面向对象吸顶条