Question

我使用优雅主题的主题Divi，我试图在页面加载时隐藏主导航菜单。然后，我希望在滚动时加载菜单here

在我向下滚动然后返回到页面顶部后，我已成功地显示菜单并根据需要重新显示。我将此作为我当前的jQuery函数：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var header = $('#main-header');
        $(window).scroll(function () {              
            if ($(document).scrollTop() == 0) {
                header.removeClass('et-fixed-header');
            } else {
                header.addClass('et-fixed-header');
            }
        });
    });
</script>

这是该部分的CSS：

#main-header { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.home #main-header { opacity: 0; top: -40px !important;}
.home #main-header.et-fixed-header { opacity: 1; top: 0 !important; }
.home.et_fixed_nav #page-container { padding-top: 0!important; }
.et_fixed_nav #page-container { padding-top: 80px !important; }

我已经在HTML中标记了所有内容，但我无法弄清楚如何使菜单最初显示。我试过用它，但我猜测我做错了什么：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var header = $('#main-header');
        $(document).load(function () {
            header.removeClass('et-fixed-header');
        $(window).scroll(function () {              
            if ($(document).scrollTop() == 0) {
                header.removeClass('et-fixed-header');
            } else {
                header.addClass('et-fixed-header');
            }
        });
    });
</script>

我是jQuery的新手，也是WordPress开发的新手。

Answer 1

如果你只是使用不透明度隐藏一个元素它保持基本结构，我建议尝试以下css（通过jquery应用）：

#et-main-area {
  top: -40px;
  position: absolute;
  width: 100%;
}

#main-header {
  opacity: 0;
}

您已经在代码中使用了-40px，但是您已将其添加到标题中，但是您需要移动网站的其余部分...我不确定这是否符合您的需要，然后再添加菜单上...

一个好主意可能是将菜单放在普通文档（定位绝对）流量之外的div中并定位在顶部，但是再次说明我在前端的东西并不是那么好。

$('#main-header').css("opacity", "0"); 
$('#et-main-area').css({  "top": "-40px", 
                           "position": "absolute", 
                           "width": "100%" 
                        });

Answer 2

此功能现在是Divi 2.4及更高版本的可用选项。它可以通过WordPress定制程序或Divi页面构建器中的各种选项来实现。

以下是一篇博客文章，其中详细介绍了可用选项：https://www.elegantthemes.com/blog/resources/exploring-divi-2-4-all-new-header-styles-and-design-settings

使用jQuery隐藏页面加载时的导航菜单

2 个答案: