How to achieve smoothe slide down effect in Navbar Menu

Question

Objective - I wanted to achieve a slide down (for navbar) effect after some scrolling. I actually achieved what I wanted, but I am getting a problem.

Problem - When scrolling up to the top, the navbar is getting sticky with no effect and it is kind of takes the charm. Can anyone help me to fix this?

You can see my code here at Codepen.

// Sticky Header
$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('#header').addClass('sticky-header');
        $('#header .mo-row').removeClass('sticky-border');
    } else {
        $('#header').removeClass('sticky-header');
        $('#header .mo-row').addClass('sticky-border');
    }
});

var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');

sidebarBtn.addEventListener('click', function(event) {

  if (this.classList.contains('active')) {
      this.classList.remove('active');
      sidebarBox.classList.remove('active');
  } else {
      this.classList.add('active');
      sidebarBox.classList.add('active');
  }
});

// accordion js

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active2');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active2')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active2');

            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }
        e.preventDefault();
    });
});

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 1000px;
  -webkit-font-smoothing: antialiased;
  font-family: 'Lato', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  vertical-align: middle;
}

a {
  text-decoration: none;
}

.mo-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  z-index: 999;
  position: relative;
}

.mo-row {
  width: 95%;
  margin: 0 auto;
}

.mo-grid:before,
.mo-grid:after,
.mo-row:before,
.mo-row:after {
  content: " ";
  display: table;
}

.mo-grid:after,
.mo-row:after {
  clear: both;
}

[class*='col-'] {
  width: 100%;
  float: left;
  min-height: 1px;
}

.col {
  margin: 10px;
}

@media screen and (min-width: 320px) {
  .col-sm-1 {
    width: 8.33333%;
  }

  .col-sm-2 {
    width: 16.66667%;
  }

  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.33333%;
  }

  .col-sm-5 {
    width: 41.66667%;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-sm-7 {
    width: 58.33333%;
  }

  .col-sm-8 {
    width: 66.66667%;
  }

  .col-sm-9 {
    width: 75%;
  }

  .col-sm-10 {
    width: 83.33333%;
  }

  .col-sm-11 {
    width: 91.66667%;
  }

  .col-sm-12 {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .col-md-1 {
    width: 8.33333%;
  }

  .col-md-2 {
    width: 16.66667%;
  }

  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.33333%;
  }

  .col-md-5 {
    width: 41.66667%;
  }

  .col-md-6 {
    width: 50%;
  }

  .col-md-7 {
    width: 58.33333%;
  }

  .col-md-8 {
    width: 66.66667%;
  }

  .col-md-9 {
    width: 75%;
  }

  .col-md-10 {
    width: 83.33333%;
  }

  .col-md-11 {
    width: 91.66667%;
  }

  .col-md-12 {
    width: 100%;
  }
}
@media screen and (min-width: 992px) {
  .col-lg-1 {
    width: 8.33333%;
  }

  .col-lg-2 {
    width: 16.66667%;
  }

  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.33333%;
  }

  .col-lg-5 {
    width: 41.66667%;
  }

  .col-lg-6 {
    width: 50%;
  }

  .col-lg-7 {
    width: 58.33333%;
  }

  .col-lg-8 {
    width: 66.66667%;
  }

  .col-lg-9 {
    width: 75%;
  }

  .col-lg-10 {
    width: 83.33333%;
  }

  .col-lg-11 {
    width: 91.66667%;
  }

  .col-lg-12 {
    width: 100%;
  }
}
.hello-bar {
  height: 40px;
  line-height: 39px;
  background: #52ae56;
  text-align: center;
  color: #fff;
}

.hello-bar a {
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}

.hello-bar a span {
  font-weight: bold;
}

.sticky-header {
  background-color: #fff !important;
  box-shadow: 0 2px 4px 0 rgba(87, 71, 81, 0.2);
  height: 65px;
  line-height: 65px;
  position: fixed !important;
  top: 0;
  -webkit-animation-name: slidedown;
  animation-name: slidedown;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@-webkit-keyframes slidedown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slidedown {
  0% {
    -webkit-transform: translateY(-400px);
    -ms-transform: translateY(-400px);
    transform: translateY(-400px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.sticky-border {
  border-bottom: 1px solid #e8e8e8;
}

#header-sec {
  position: relative;
  z-index: 9999999;
  height: 65px;
  line-height: 65px;
  /* Fold Out */
  /* accordion css */
}
#header-sec #header {
  background-color: transparent;
  width: 100%;
  height: 66px;
  line-height: 64px;
  position: absolute;
}
#header-sec #header .navbar-logo {
  height: 65px;
  line-height: 65px;
  cursor: pointer;
}
#header-sec #header .navbar-logo img {
  height: 75px;
  margin-top: -4px;
  margin-left: -17px;
}
#header-sec .nav ul {
  background-color: transparent;
}
#header-sec .nav ul > li {
  display: inline-block;
  position: relative;
}
#header-sec .nav a {
  display: block;
  padding: 10px 18px 10px 15px;
  font-size: 0.9em;
  line-height: 1.2em;
  color: #0d1739;
  font-weight: 400;
}
#header-sec .nav a:hover {
  text-decoration: none;
}
#header-sec .nav li ul {
  background-color: #fff;
}
#header-sec .nav li ul li {
  width: 200px;
  display: block;
  text-align: left;
}
#header-sec .nav li ul a {
  border: none;
  color: #333;
}
#header-sec .nav li ul a:hover {
  background: #333;
  color: #fff;
}
#header-sec .nav li ul {
  position: absolute;
  left: 0;
  top: 52px;
  z-index: 1;
  max-height: 0;
  overflow: hidden;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -webkit-transition: 350ms;
  -moz-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;
}
#header-sec .nav ul > li:hover ul {
  max-height: 1000px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.27);
}
#header-sec .accordion-section-content li {
  background: #fff;
  padding: 10px 30px;
  border-bottom: 1px solid #f6f6f6;
  border-left: 1px solid #f6f6f6;
}
#header-sec .accordion-section-content li:hover {
  background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content li:last-child {
  border-bottom: none;
}
#header-sec a {
  color: #343838;
}
#header-sec #box {
  position: fixed;
  z-index: 4;
  overflow: auto;
  top: 0px;
  right: -250px;
  width: 250px;
  opacity: 0;
  padding: 20px 0px;
  height: 100%;
  background-color: #f6f6f6;
  color: #343838;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #box.active {
  right: 0px;
  opacity: 1;
}
#header-sec #items {
  position: relative;
  top: 8.7%;
  line-height: normal;
}
#header-sec #items .item {
  position: relative;
  cursor: pointer;
  font-size: 1em;
  /* originally 2ems  */
  padding: 10px 20px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
#header-sec #items .item:hover {
  padding: 10px 20px;
  background-color: rgba(52, 56, 56, 0.2);
}
#header-sec #btn {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 9px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#header-sec #btn div {
  width: 30px;
  height: 2px;
  margin-bottom: 7px;
  background-color: #1d1f20;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#header-sec #btn.active {
  right: 9px;
}
#header-sec #btn.active div {
  background-color: #343838;
}
#header-sec #btn.active #top {
  -webkit-transform: translateY(10px) rotate(-135deg);
  -ms-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
}
#header-sec #btn.active #middle {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
#header-sec #btn.active #bottom {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}
#header-sec .accordion {
  overflow: hidden;
  line-height: normal;
}
#header-sec .accordion-section-title {
  cursor: pointer;
  width: 100%;
  transition: all linear 0.15s;
  -webkit-transition: all linear 0.15s;
  -moz-transition: all linear 0.15s;
  -ms-transition: all linear 0.15s;
  -o-transition: all linear 0.15s;
  position: relative;
  display: block;
  padding: 10px 20px;
}
#header-sec .accordion-section-title:hover {
  padding: 10px 20px;
  background-color: rgba(52, 56, 56, 0.2);
}
#header-sec .accordion-section-content {
  display: none;
  background: #f0f0f0;
}
#header-sec .active2, #header-sec .open {
  display: block;
}
#header-sec #box, #header-sec #btn {
  display: none;
}
@media screen and (max-width: 992px) {
  #header-sec .navbar-menu {
    display: none;
  }
  #header-sec #box, #header-sec #btn {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hello-bar">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <a class="try_it_for_free_event_gtm" onclick="ga('send', 'event', 'TryForFree', 'TryForFree-clicked', 'TryForFree')" href="http://info.moengage.com/push-amplification/?utm_source=homepage&utm_medium=ribbon">Introducing <span>MoEngage Push Amplification</span>: Industry-First Solution for Push Delivery Issues
                 &nbsp;&nbsp;&nbsp;<img src="img/notification.png" alt="" style="width: 17px;"></a>
            </div>
        </div>
    </div>
</div>

<section id="header-sec">
    <header id="header">
        <div class="mo-container">
            <div class="mo-row sticky-border">
                <nav class="col-sm-6 col-md-4 col-lg-2">
                    <div class="navbar-logo">
                        <img src="img/logo-dark.png" alt="">
                    </div>
                </nav>

                <nav class="col-sm-6 col-md-8 col-lg-10 text-right">
                    <div class="navbar-menu nav">
                        <ul>
                            <li>
                                <a href="">Product &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul>
                                    <li><a href="#">Flows</a></li>
                                    <li><a href="#">Web Push</a></li>
                                    <li><a href="#">Email Campaigns</a></li>
                                    <li><a href="#">In-app Nativ</a></li>
                                    <li><a href="#">User Intelligence</a></li>
                                    <li><a href="#">Engagement Platform</a></li>
                                    <li><a href="#">Smart Triggers</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="">Customers &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul>
                                    <li><a href="#">Customer Stories</a></li>
                                    <li><a href="#">Help &amp; Support</a></li>
                                    <li><a href="#">Developers Docs</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="">Company &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul>
                                    <li><a href="">About</a></li>
                                    <li><a href="">Blog</a></li>
                                    <li><a href="">Jobs</a></li>
                                </ul>
                            </li>

                            <li><a href="">Pricing</a></li>
                            <li><a href="">Login</a></li>
                            <li><a href="">Sign Up</a></li>
                            <li>
                                <a href="" style="padding-right: 0;">
                                    <button class="button primary">Free Demo</button>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div id="box">
                        <div id="items">
                            <div class="accordion">
                                <div class="accordion-section">
                                    <a class="accordion-section-title" href="#accordion-1">
                                        Product &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
                                    </a>
                                    <div id="accordion-1" class="accordion-section-content">
                                        <ul>
                                            <li><a href="#">Flows</a></li>
                                            <li><a href="#">Web Push</a></li>
                                            <li><a href="#">Email Campaigns</a></li>
                                            <li><a href="#">In-app Nativ</a></li>
                                            <li><a href="#">User Intelligence</a></li>
                                            <li><a href="#">Engagement Platform</a></li>
                                            <li><a href="#">Smart Triggers</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion">
                                <div class="accordion-section">
                                    <a class="accordion-section-title" href="#accordion-2">
                                      Customers &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
                                    </a>
                                    <div id="accordion-2" class="accordion-section-content">
                                        <ul>
                                            <li><a href="">About</a></li>
                                            <li><a href="">Blog</a></li>
                                            <li><a href="">Jobs</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion">
                                <div class="accordion-section">
                                    <a class="accordion-section-title" href="#accordion-3">
                                      Company &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i>
                                    </a>
                                    <div id="accordion-3" class="accordion-section-content">
                                        <ul>
                                            <li><a href="">About</a></li>
                                            <li><a href="">Blog</a></li>
                                            <li><a href="">Jobs</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="item">Pricing</div>
                            <div class="item">Login</div>
                            <div class="item">Sign Up</div>
                        </div>
                    </div>

                    <div id="btn">
                        <div id="top"></div>
                        <div id="middle"></div>
                        <div id="bottom"></div>
                    </div>
                </nav>
            </div>
        </div>
    </header>
</section>

Answer 1

所以我改变了你的粘性标题JS，在向上滚动时添加了一个类，并且从顶部滚动了一个200px的类。

JS

 // Sticky Header
 jQuery(window).scroll(function() {    
     var scroll = jQuery(window).scrollTop();
     if (scroll > 200) {
         jQuery("#header").addClass("show");
     } else {
         jQuery("#header").removeClass("show");
     }
 });

 var lastScrollTop = 0;
 jQuery(window).scroll(function(event){
 var st = jQuery(this).scrollTop();
    if (st > lastScrollTop){
        jQuery("#header").removeClass("up");
    } else {
       jQuery("#header").addClass("up");
    }
    lastScrollTop = st;
 });

然后添加了CSS

    #header-sec #header,
    #header-sec #header.up{
          position: absolute;
          top: 0;
          -webkit-transition: top 500ms ease-out ;
           -moz-transition: top 500ms ease-out ;
           -o-transition: top 500ms ease-out ;
           transition: top 500ms ease-out ;
    }
    #header-sec #header.show {
     position: fixed !important;
      top: 0;
      -webkit-animation-name: slidedown;
      animation-name: slidedown;
      -webkit-animation-duration: .5s;
      animation-duration: .5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    #header-sec #header.up.show {
         position: fixed !important;
         top: 0;
        -webkit-animation-name: slideup;
        animation-name: slideup;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
       -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
    }
    @-webkit-keyframes slideup {
      0% {
        opacity: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      100% {
        -webkit-transform: translateY(-400px);
        transform: translateY(-400px);
      }
    }
    @keyframes slideup {
      0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
     }
      100% {
        -webkit-transform: translateY(-400px);
       -ms-transform: translateY(-400px);
        transform: translateY(-400px);
      }
    }

希望你能用这个