Question

嘿大家提前感谢您的帮助。

我知道有很多问题已经回答了这个问题，但我觉得我的问题还有另外一层。我使用bootstraps affix命令使导航栏在300px到达导航栏时变粘。此时我还试图让导航栏切换出徽标，这样我就可以显示一个较小的徽标，而不必担心这么大的导航栏。我认为问题出在导航栏固定并丢掉我的jquery滚动高度。如果有人对此有任何疑问，请告诉我。

谢谢！

Jquery的

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 300) {
      $("#logo").removeClass("site-logo-full"),
      $("#logo").addClass("site-logo-reduced");
    } else {
      $("#logo").removeClass("site-logo-reduced"),
      $("#logo").addClass("site-logo-full");
    }
  });
});

HTML

<header class="jumbotron">

  <div class="container-fluid ad-container"> </div>

 <nav class="navbar navbar-default" data-spy="affix" data-offset-top="300">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      </div>

      <div id="navbar" class="navbar-collapse collapse">

        <ul class="nav navbar-nav">
          <li id="logo" class="hidden-xs site-logo-full">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"></a>
          </li>
        </ul>

        <ul class="nav navbar-nav navbar-right navbar-main-custom">
          <li><a href="#eventme">Event Me</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  </section>

</header>

SASS

    // Jumbotron Css

.jumbotron
  background: url('../images/jumbotron.jpg') no-repeat center center
  height: 600px
  padding: 0

.ad-container
  height: 300px

.affix
  top: 0
  width: 100%
  z-index: 9999 !important

.affix ~ .container-fluid
  position: relative
  padding-top: 50px

然后我从WP functions.php

导入我的图像

if ( ! function_exists( 'alpha_load_wp_head' ) ) {
    function alpha_load_wp_head() {
        // Get the logos
        $logo = IMAGES . '/logo.png';
        $logo_retina = IMAGES . '/logo@2x.png';

        $logo_size = getimagesize( $logo );
        ?>

        <!-- Logo CSS -->
        <style type="text/css">
            .site-logo-full a {
                background: url( <?php echo $logo; ?> ) 0 0 no-repeat;
                width: <?php echo $logo_size[0] ?>px;
                height: <?php echo $logo_size[1] ?>px;
                display: inline-block;
            }

使用jquery和bootstrap afix

0 个答案: