javascript - Bootstrap Navbar 链接在 Ease-In 时被禁用

Question

我在 Bootstrap 4 页面上有一个顶部粘性导航栏，该导航栏设置为在向下滚动页面后缓入/显示。然而，当导航栏显示出来时，没有链接功能，甚至 :hover 也没有改变链接颜色。我使用了媒体查询，因为我希望它首先在桌面上隐藏自己。这是我的代码，草稿可以找here.

@media (max-width: 768px) {
  .navbar-home {
      opacity: 1!important;
    }
}

@media (min-width: 768px) {
  .navbar-home {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
  }
}

Javascript:

(function ($) {
    $(document).ready(function(){
    // scroll functions
    $(window).scroll(function(e) {
        if($(window).width() >= 768) 

            var scroll = $(window).scrollTop();
            if (scroll >= 150) {
                $('.navbar-home').addClass("navbar-hide");
            } else {
                $('.navbar-home').removeClass("navbar-hide");
        }

    });

    });

})(jQuery); 

导航栏的 HTML

<nav class="navbar navbar-home navbar-expand-lg navbar-blue fixed-top py-0">
    <div class="container">
    <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="" class="logo"/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="about.html">About <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="fitness.html">Fitness &amp; Nutrition</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="testimonials.html">Testimonials</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="blog.html">Blog</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="dropdown" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Membership</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="membership.html">Memberships</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="https://clients.mindbodyonline.com/ASP/adm/adm_appt_search.asp?studioid=22296&view=&sSU=&qParam=&lvl=&catid=&prodid=&date=12%2F20%2F2018&classid=0&trn=0&tg=&loc=1&vt=&justloggedin=&pMode=0&stype=&page=&prodGroupId=&optForwardingLink=&nLgIn="><i class="fas fa-user"></i>&nbsp;Client Login</a>
            </div>
        </li>
      </ul>

    </div>
    </div>
</nav>

Answer 1

.navbar-hide 类有 pointer-events: none; css。这会阻止它拦截点击。

您可能想要修复的另一件事:如果您向下滚动并刷新，您的脚本不会检查滚动位置，并且会隐藏导航栏，直到您手动滚动。