javascript - Bootstrap4：在用户滚动时将元素移动/添加到我的导航栏

Question

我有一个 wordpress 网站，前端使用 bootstrap 4.5 开发（我第一次使用 bootstrap）。该站点当前使用标准的粘性 Bootstrap 4 导航栏，如下所示：

<header>
    <nav class="navbar navbar-dark navbar-expand-md bg-dark box-shadow fixed-top">
        
        <a href="https://www.explorecinema.com" class="navbar-brand">
            <h1 class="text-uppercase site-title"><?php bloginfo( 'name' ); ?></h1>
        </a>

        <p class="navbar-text site-description mb-0">
            <?php 
                $description = get_bloginfo( 'description', 'display' );
                echo $description; 
            ?>
        </p>

        <button class="navbar-toggler collapsed" 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="navbar-collapse collapse justify-content-end" id="navbarCollapse" style="">
          <ul class="navbar-nav">
          
            <li class="nav-item">
                <a href="https://www.explorecinema.com/about-us/" class="nav-link navbar-right"> About</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <ul class="navbar-nav">
            <li class="nav-item">
              <a href="https://www.explorecinema.com/suggest-content/" class="navbar-link btn btn-outline-success">Suggest Content</a>
            </li>
          </ul>  
          </form>       
        </div>

        
    </nav>
</header>

这会产生这种风格的导航栏，默认情况下，我的页面标题和过滤器位于导航栏下方的主容器中。

但是，在滚动时，我想将页面标题和过滤器移动（或隐藏和添加）到我的导航栏中。看起来类似于我下面的粗略模型。

我将如何做到这一点，我假设涉及 JQuery/Javascript？我以前没有做过类似的事情。

我的猜测是以某种方式隐藏默认标题和过滤器并将它们作为隐藏元素添加到导航栏，然后在滚动时显示为可见。如果我这样做，我将如何保持导航栏响应？

标签： javascriptcssbootstrap-4

Answer 1

导航栏上的元素，仅隐藏......当用户滚动时，您可以取消隐藏它们；为此，我们需要滚动事件侦听器。

$(document).ready(function() {
  var scrollingNow = (e) => {
    if (window.scrollY > 50) {
      if ($('#toggleOnScroll').hasClass('hideHeading')) {
        $('#toggleOnScroll').removeClass('hideHeading')
        $('#toggleOnScroll').addClass('showHeading')
      }
    } else {
      if ($('#toggleOnScroll').hasClass('showHeading')) {
        $('#toggleOnScroll').removeClass('showHeading')
        $('#toggleOnScroll').addClass('hideHeading')
      }
    }
  }
  console.log('$ works');
  window.addEventListener('scroll', scrollingNow);
});

.hideHeading {
  display: none
}

.showHeading {
  display: block;
  color: #fff
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<header>
  <nav class="navbar navbar-dark navbar-expand-md bg-dark box-shadow fixed-top">
    <h2 id='toggleOnScroll' class='hideHeading'>Show Me on Scroll</h2>

    <a href="https://www.explorecinema.com" class="navbar-brand">
      <h1 class="text-uppercase site-title">
        <?php bloginfo( 'name' ); ?>
      </h1>
    </a>

    <p class="navbar-text site-description mb-0">
      <?php 
                $description = get_bloginfo( 'description', 'display' );
                echo $description; 
            ?>
    </p>

    <button class="navbar-toggler collapsed" 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="navbar-collapse collapse justify-content-end" id="navbarCollapse" style="">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="https://www.explorecinema.com/about-us/" class="nav-link navbar-right"> About</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="https://www.explorecinema.com/suggest-content/" class="navbar-link btn btn-outline-success">Suggest Content</a>
          </li>
        </ul>
      </form>
    </div>
  </nav>
</header>

this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some
text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/> this is some text <br/><br/><br/>this
is some text <br/><br/><br/> this is some text <br/><br/><br/>