Question

我正在使用带有Elementor插件的Astra模板。

我已经将导航栏设置为固定-可以在网页上滚动，但是现在我的项目显示在该网页下。而且我不是在谈论z-index问题，而是navbar之后的第一件事-面包屑和标题都在navbar下。

.main-header-bar-wrap{
    position:fixed;
    top:0;
    width:100%;
}

我使用-

解决了该问题

padding-top:100px;

但是我真的不认为这是最佳实践。

有更好的解决方案吗？

谢谢！

Answer 1

不幸的是，实际上并没有一种万无一失的方法。固定元素完全从页面流及其呈现方式中删除，因此不会占用任何空间。 https://developer.mozilla.org/en-US/docs/web/css/position#fixed

完成此操作的一种方法是，另一种方法是在调整窗口大小时更改填充以匹配高度（以确保高度始终正确）。

例如像这样：

hostvars[groups.masters.0]

另一种选择是使用$(window).resize(function () { $(".main").css("padding-top",$(".main-header-bar-wrap").outerHeight()); })和position: relative创建标题的隐藏副本，这将占用所需的空间但不可见。只需确保添加visibility: hidden属性，以使拥有屏幕阅读器的人都不会得到重复的菜单。

您可以使用js进行以下操作：

aria-hidden="true"

这将复制标头并将类$( ".main-header-bar-wrap" ).after( $(".main-header-bar-wrap").clone().addClass("spacer").attr("aria-hidden","true") );添加到第二个版本中，因此您可以使用spacer和visibility属性以及position分别设置其样式属性。

如何防止项目出现在wordpress的固定导航栏中？

1 个答案: