Question

<div class="sticky-header nav-row stick"> <span class="sticky-text"> <i class="fa fa-phone"></i> <strong>Don't wait another day. Your marketing solution is just a phone call away.</strong> </span> <a class="sticky-link" href="tel:561-396-9895" 561 396 9895</a> </div>

这是我编译的代码，但是在wordpress上不起作用...我应该如何调整它？另外，是否可以使用CSS做到这一点？

Answer 1

您需要css来执行此操作，有些甚至可能会说js，但是您尚未提供任何css代码来帮助给出答案。尝试按照有关W3学校的本指南进行操作

https://www.w3schools.com/howto/howto_js_sticky_header.asp

它应该有助于解决您的问题。

要获取快速修复，请尝试将以下代码添加到您的sticky-header类中，或为其创建新的类或ID

position: fixed;
top: 0;
left: 0;
z-index: 1000;

确保主导航标题的z-index属性小于1000

Answer 2

也许您可以使用css z-index：

    .stickyHeader {
    position: sticky;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    background-color: lightgreen;
    height: 50px;
    }
    
    header {
    position: fixed;
    height: 30%;
    width: 100%;
    background-color: gray;
    }

<header>Header</header>

    <div class='stickyHeader'>
    <p>Example (under this is the header)</p>
    </div>


    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

这有帮助吗？

如何添加覆盖我的主导航标题的粘性标题？

2 个答案: