javascript 在Scroll上显示Navbar

Posted 2021-05-04

section.navbar {
  @extend .flex;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  border: none;
  border-radius: 0;
  &#navbar-scroll {
    position: fixed;
    z-index: 10;
    background: $primary-color;
    border-bottom: solid 5px white;
    .border-black {
      width: 100%;
      height: 9px;
      background: black;
      position: absolute;
      z-index: 2;
      bottom: -14px;
    }
  }
  .wrapper {
    @extend .flex;
    @extend .flex--wrap;
    @extend .flex--center;
    @extend .page-wrapper; // container width [_base.scss]
    width: 100%;
    padding: 2rem 3rem;
    position: relative;
    .item {
      @extend .flex;
      &--1 {
        flex: 0 1 40%;
      }
      &--2 {
        flex: 0 1 60%;
        color: white;
        .box {
          margin: auto 0 auto auto;
        }
      }
    }
  }

  .logo {
    max-width: 90px;
  }

  .ribbon {
    background: url('../img/ribbon/40years-strong.svg') no-repeat center center / contain;
    height: 156px;
    width: 102px;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 14rem;
  }

  .contact {
    font-size: 1.7rem;
    font-weight: 700;
    position: relative;
    top: -1px;
  }

  .divider {
    background: white;
    width: 1px;
    height: 25px;
    padding: 0;
    position: relative;
    top: 5px;
  }

  .apply {
    font-size: 2.6rem;
    font-weight: 700;
  }

  a {
    color: white;
    &:hover,
    &:focus,
    &:target,
    &:active {
      text-decoration: underline;
    }
  }

}

<?php $x = 1; while ($x <= 2) { ?>

    <section class="navbar" <?php if($x == 2) { ?> id="navbar-scroll" <?php } ?>>
        <div class="wrapper">
            <div class="item item--1">
                <div class="box">

                    <a href="/">
                        <?php if ($x == 1) { ?>
                            <img class="logo" src="<?php echo get_template_directory_uri(); ?>/assets/build/img/logos/koch.png" alt="Koch" />
                        <?php } else { ?>
                            <img class="logo" src="<?php echo get_template_directory_uri(); ?>/assets/build/img/logos/koch_white.png" alt="Koch" />
                        <?php } ?>
                    </a>

                    <div class="ribbon"></div>
                </div>
            </div>
            <div class="item item--2">
                <div class="box">
                    <ul class="list-inline">
                        <li>
                            <p class="contact">Speak with a recruiter now 000-000-0000</p>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <p class="apply"><a href="#">Apply Online</a></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="border-black"></div>
    </section>

<?php $x++; } ?>

(function ($) {
    $(document).ready(function(){
        
        // hide .navbar first
        $("#navbar-scroll").hide(); 

        // fade in .navbar after scroll
        $(function () { 
            $(window).scroll(function () {
                // set distance user needs to scroll before we fadeIn navbar
                if ($(this).scrollTop() > 600) {
                    $('#navbar-scroll').fadeIn();
                } else {
                    $('#navbar-scroll').fadeOut();
                }
            });
        });
    });
}(jQuery));