Elementor Pro 中具有透明背景和模糊滚动内容的粘性标题

Question

我正在使用 Elementor Pro 开发一个 WordPress 网站，我正在尝试实现一个具有透明背景的粘性标题，该标题在滚动时会模糊其后面的内容。我面临一些问题，我确实需要一些指导：

粘性标题：我希望滚动时标题保持在顶部，但是当我使用position:sticky时，它无法按预期工作。在 Elementor Pro 中使用 Position: Sticky 时是否有任何常见陷阱？

模糊背景效果：我应用了背景滤镜：blur(10px);到标题，为标题后面滚动的内容创建模糊效果。但是，我的编辑器显示此属性无效的错误，并且该效果似乎不适用于某些浏览器。有没有更好的方法来实现这个目标？

额外填充：添加一些 CSS 来设置标题样式后，整个标题已向页面下推 86 像素，这会导致布局问题。如何将标题保持在顶部，同时确保下面的内容不会干扰？

这是我当前使用的CSS：

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(52, 63, 99, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 100%;
}

.main-content {
    padding-top: 86px;
}

Answer 1

如果您想粘贴元素或标题，则需要将其粘贴并将其设置在顶部，即“高级”选项卡。然后你可以将这段代码粘贴到CSS面板上

    selector.elementor-sticky--effects{
      background: #fff !important;
      color: #212121;
      box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
    }

selector.elementor-sticky--effects 这个类用于 elementor Sticky。