相对位置使粘性菜单不起作用

Question

好的，导航栏菜单（白色栏）工作正常并固定在顶部，但是当我单击菜单时，粘性 class 不再工作。我弄清楚是什么导致了这个问题，但我不确定如何解决这个问题。

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

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

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

Answer 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;
 }

相对位置使粘性菜单不起作用

Position Relative Is Making Sticky Menu Not Work

html

css

mobile

sticky

navbar