如何创建粘性菜单？

Question

我正在尝试创建一个sticky menu。我试了几次，这是我最后一次try：

这是我尝试过的代码：

.nav-menu-holder li a.wpfm-menu-link .wpfm-icon-block {
    color: #fff;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.nav-menu-holder li a.wpfm-menu-link .wpfm-icon-block i {
    line-height: unset;
    font-size: 18px;
}
.nav-menu-holder li a.wpfm-menu-link .wpfm-menu-name-tooltip-wrap, .nav-menu-holder li a.wpfm-menu-link .wpfm-menu-name-tooltip-wrap, .nav-menu-holder li a.wpfm-menu-link .wpfm-menu-name-tooltip-wrap {
    position: absolute;
    left: 55px;
    top: -30px;
    height: 30px;
    line-height: 30px;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
    background: #724fc7;
    padding: 0 10px;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    visibility: hidden;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.nav-menu-holder li a.wpfm-menu-link .wpfm-menu-name-tooltip-wrap:before, .nav-menu-holder li a.wpfm-menu-link .wpfm-menu-name-tooltip-wrap:before, .nav-menu-holder li a.wpfm-menu-link .wpfm-menu-name-tooltip-wrap:before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border-right: 6px solid #724fc7;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

<nav class="nav-menu-holder">
            <ul>
                <li class="wpfm-active-nav" data-li-key="1">
                    <a title="" class="wpfm-menu-link" href="#div-1" rel=" ">
                        <span class="wpfm-icon-block ">
                        <i class="dashicons dashicons-admin-home" aria-hidden="true"></i>
                        </span>
                        <span class="wpfm-menu-name-tooltip-wrap">
                            <span class="name wpfm-menu-name">Home</span>
                        </span>
                    </a>    
                </li>
                <li data-li-key="1">
                    <a title="" class="wpfm-menu-link" href="#div-1" rel=" ">
                        <span class="wpfm-icon-block ">
                        <i class="dashicons dashicons-admin-home" aria-hidden="true"></i>
                        </span>
                        <span class="wpfm-menu-name-tooltip-wrap">
                            <span class="name wpfm-menu-name">Home</span>
                        </span>
                    </a>    
                </li>
            </ul>
        </nav>

感谢您的帮助。

Answer 1

您可以使用 javascript 制作导航栏 1）。添加 CSS

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

*如果您将此类添加到 HTML 中，则导航栏将位于顶部 所以我们必须在用户滚动时添加它。为此，我们必须 2）。添加javascript

window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementByClassName("nav-menu-holder");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}