【问题标题】:Position Relative Is Making Sticky Menu Not Work相对位置使粘性菜单不起作用
【发布时间】:2020-03-19 06:02:26
【问题描述】:

好的,导航栏菜单(白条)工作正常,并且一直停留在顶部,但是当我单击菜单时,Sticky 类不再工作。我弄清楚是什么导致了问题,但我不确定如何解决这个问题。

 /* This is Causing Sticky To Not Work After you Click On "Hamburger Menu" */
   .bottomnav.responsive {position: relative;}

我试图删除 .bottomnav.responsive {position: relative;} 但是当我这样做时菜单无法正常工作。请让我知道在不弄乱菜单的情况下解决此问题的最佳方法是什么。

您可以在这里查看网站 http://lonestarwebandgraphics.com/

【问题讨论】:

    标签: html css mobile navbar sticky


    【解决方案1】:

    你能用这段代码做粘性吗

        function fixed_top_menu() {
            var windows = $(window);
            windows.on("scroll", function () {
                var header_height = $(".bottomnav").height();
                var scrollTop = windows.scrollTop();
                if (scrollTop > header_height) {
                    $(".bottomnav").addClass("sticky");
                } else {
                    $(".bottomnav").removeClass("sticky");
                }
            });
        }
        fixed_top_menu();
    
    .bottomnav.sticky{
     background-color: #fff;
     position: fixed;
     top: 0;
     }
    

    【讨论】:

    • 感谢您的帮助。你建议我用我已经使用的粘性函数添加你的函数,还是我删除我已经拥有的粘性函数并添加你的?
    • 对于粘性基本上我使用这个功能,这就是我推荐你的原因。你可以试试看,希望会有好的结果。
    猜你喜欢
    • 1970-01-01
    • 2021-09-19
    • 1970-01-01
    • 2020-02-29
    • 2020-09-06
    • 2023-03-20
    • 2022-12-16
    • 1970-01-01
    • 2020-02-22
    相关资源
    最近更新 更多