Question

如何隐藏主页滑块上的菜单并在页面向下滚动时激活它。当前，菜单显示在滑块上，滚动时也显示菜单。但是在这里我希望它隐藏滑块上的菜单。我怎么藏起来

在图像上，我想隐藏该菜单。

我尝试了一些CSS。但滚动后也不会显示。

.menu-bar-wrapper:not(.float-header)
    display: none;
}

.menu-bar-wrapper:not(.is-sticky) {
    display: none;
}

Answer 1

隐藏页面顶部的菜单

.top_nav.affix-top
    {
    height:0;
    overflow:hidden;
    }

之后，它变成.top_nav.affix而不是.top_nav.affix-top

.menu-bar-wrapper似乎不是什么。

您可以通过右键单击并从弹出菜单中选择“检查元素”来解决此问题。

Answer 2

您需要clone菜单和徽标，并为其分别编写CSS，然后添加一个标头固定的子类，该子类将具有display: none;和display: block;属性，滚动条上可见的菜单，并在页面顶部时将其隐藏。

Answer 3

我为该页面添加了javascript。它对我来说很好。

<script type="text/javascript">
                    jQuery(document).ready(function($) {
                        (function ($) {
  $(document).ready(function(){

                // hide .navbar first
                $(".top_nav").hide();

                // fade in .navbar
                $(function () {
                                $(window).scroll(function () {
            // set distance user needs to scroll before we fadeIn navbar
                                                if ($(this).scrollTop() > 100) {
                                                                $('.top_nav').fadeIn();
                                                } else {
                                                                $('.top_nav').fadeOut();
                                                }
                                });


                });

});
  }(jQuery));                   });             
                </script>

隐藏菜单主滑块并在页面向下滚动时将其激活

3 个答案: