javascript - jQuery - 滚动标题动画

Question

<header class="nb-header row-fluid">
    <div class="container-fluid">
       <div class="nb-logo row-fluid">
          <a href="#">
          logo
          </a>
       </div>
       <div class="nb-hamburger">
          Hamburger
       </div>
    </div>
   </header>
   <!--nb-header-->
   <div class="nb-menu-bar row-fluid">
      <div class="container-fluid">
         <ul>
  <li> <a href="#"> <span class="nb-menu-link"> Work </span> <span class="nb-menu-sub">
     What we’ve done </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Services </span> <span class="nb-menu-sub">
     What we do </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Studio </span> <span class="nb-menu-sub">
     Who we are </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Contact </span> <span class="nb-menu-sub">
     Get in touch </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Careers </span> <span class="nb-menu-sub">
     Join the team </span> </a> 
  </li>
      </ul>
                </div>
             </div>
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.Showing/hiding any HTML DOM element is a common scenario based on
various business requirements. Since the time of SPA (single page application) is evolved, you will find that
on scroll position of browser, new elements are shown and previous elements are hidden. There are tons of
jQuery plugins available which can show/hide any HTML element based on the scroll position but it’s not
advisable to use jQuery plugins for things which you can do with simple jQuery code. So in this post, let’s
see how to show/hide any HTML element based on the scroll position in the browser window using
jQuery.Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since
the time of SPA (single page application) is evolved, you will find that on scroll position of browser, new
elements are shown and previous elements are hidden. There are tons of jQuery plugins available which can
show/hide any HTML element based on the scroll position but it’s not advisable to use jQuery plugins for
things which you can do with simple jQuery code. So in this post, let’s see how to show/hide any HTML element
based on the scroll position in the browser window using jQuery.Showing/hiding any HTML DOM element is a common
scenario based on various business requirements. Since the time of SPA (single page application) is evolved,
you will find that on scroll position of browser, new elements are shown and previous elements are hidden.
There are tons of jQuery plugins available which can show/hide any HTML element based on the scroll position
but it’s not advisable to use jQuery plugins for things which you can do with simple jQuery code. So in this
post, let’s see how to show/hide any HTML element based on the scroll position in the browser window using
jQuery.Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since
the time of SPA (single page application) is evolved, you will find that on scroll position of browser, new
elements are shown and previous elements are hidden. There are tons of jQuery plugins available which can
show/hide any HTML element based on the scroll position but it’s not advisable to use jQuery plugins for
things which you can do with simple jQuery code. So in this post, let’s see how to show/hide any HTML element
based on the scroll position in the browser window using jQuery.Showing/hiding any HTML DOM element is a common
scenario based on various business requirements. Since the time of SPA (single page application) is evolved,
you will find that on scroll position of browser, new elements are shown and previous elements are hidden.
There are tons of jQuery plugins available which can show/hide any HTML element based on the scroll position
but it’s not advisable to use jQuery plugins for things which you can do with simple jQuery code. So in this
post, let’s see how to show/hide any HTML element based on the scroll position in the browser window using
jQuery.Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since
the time of SPA (single page application) is evolved, you will find that on scroll position of browser, new
elements are shown and previous elements are hidden. There are tons of jQuery plugins available which can
show/hide any HTML element based on the scroll position but it’s not advisable to use jQuery plugins for
things which you can do with simple jQuery code. So in this post, let’s see how to show/hide any HTML element
based on the scroll position in the browser window using jQuery.Showing/hiding any HTML DOM element is a common
scenario based on various business requirements. Since the time of SPA (single page application) is evolved,
you will find that on scroll position of browser, new elements are shown and previous elements are hidden.
There are tons of jQuery plugins available which can show/hide any HTML element based on the scroll position
but it’s not advisable to use jQuery plugins for things which you can do with simple jQuery code. So in this
post, let’s see how to show/hide any HTML element based on the scroll position in the browser window using
jQuery.Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since
the time of SPA (single page application) is evolved, you will find that on scroll position of browser, new
elements are shown and previous elements are hidden. There are tons of jQuery plugins available which can
show/hide any HTML element based on the scroll position but it’s not advisable to use jQuery plugins for
things which you can do with simple jQuery code. So in this post, let’s see how to show/hide any HTML element
based on the scroll position in the browser window using jQuery.Showing/hiding any HTML DOM element is a common
scenario based on various business requirements. Since the time of SPA (single page application) is evolved,
you will find that on scroll position of browser, new elements are shown and previous elements are hidden.
There are tons of jQuery plugins available which can show/hide any HTML element based on the scroll position
but it’s not advisable to use jQuery plugins for things which you can do with simple jQuery code. So in this
post, let’s see how to show/hide any HTML element based on the scroll position in the browser window using
jQuery.
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.
Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time
of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are
shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML
element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do
with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll
position in the browser window using jQuery.

.nb-header {
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: 100% !important;
background:#fff200;
padding: 12px 0;
z-index: 1000;
@media(max-width: 767px) {
padding: 15px 0;
}
.nb-logo {
width: 45px;
float: left;
}
.nb-logo a {
display: block;
}
.nb-logo img {
display: block;
}
}

.nb-hamburger {
float: right;
cursor: pointer;
transition: all 0.6s;
}

.nav-up {
top: -75px;
}

.nb-menu-bar {
text-align: center;
display: none;
background: #fff200;
position: fixed;
z-index: 100;
// right:0;
// top: 0;
// left: 0;
// width: 100%;

ul {
padding: 50px 0;
margin-top: 70px;
@media(min-width: 767px) {
padding: 200px 0;
}
}


li {
display: block;
margin: 25px 20px 0 20px;
@media(min-width: 767px) {
display: inline-block;
vertical-align: middle;
margin: 0 20px 0 20px;
}

@media(min-width:800px) {
margin: 0 20px 0 20px;
}

@media(min-width:1100px) {
margin: 0 30px 0 30px;
}

}

a {
display: block;
font-size: 25px;    
color: #1b1b1c;
font-weight: 700;

@media(min-width:800px) {
font-size: 28px;
}

@media(min-width:1100px) {
font-size: 36px;
}

span.nb-menu-sub {
font-size: 15px;
color: #4a4a4a;
display: block;
font-weight: $primary-weight;
margin-top: 5px;
@media(min-width: 991px) {
font-size: 18px;
margin-top: 15px;
}
}

}

span.nb-menu-link {
position: relative;
z-index: 1;
&::before {
content: '';
height: 5px;
width: 0;
display: inline-block;
border-radius: 2px;
background: #fff200;
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
transition: all 0.5s;
}
}

a:hover span.nb-menu-link:before {
width: 100%;
}




}




.hamburger-content {
display: none;
background: #0000;
}

.hamburger-container {
display: inline-block;
padding: 15px 0 15px 15px;
margin-left: 20px;
cursor: pointer;
}

.hamburger-grid {
width: 20px;
transition: all 0.5s;
}

.hamburger-line {
height: 2px;
width: 20px;
display: block;
background: #000;
margin-top: 5px;
}


var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}

lastScrollTop = st;
}

大家好，我正在尝试制作页眉动画。当我们向下滚动时，标题将隐藏。当我们滚动到顶部时，标题将显示。但问题是有汉堡菜单。当我们通过单击该菜单打开菜单时，标题的动画不希望发生。当我们关闭菜单时，标题应该与动画一起工作。我们可以使用我的代码来做到这一点吗？我在上面附上了我的整个代码。请通过它。如果你们知道的话请帮忙。谢谢 :)

Answer 1

在这里...现在检查

var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
$('.nb-hamburger').click(function(){
  $(this).toggleClass('is-open');
});
function hasScrolled() {
var st = $(this).scrollTop();

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight && !$('.nb-hamburger.is-open').length){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height() && !$('.nb-hamburger.is-open').length) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}

lastScrollTop = st;
}

body {
  height:2000px;
}
.nb-header {
position: fixed;
top: 0;
right: 0;
bottom: auto;
left: 0;
width: 100% !important;
background:#fff200;
padding: 12px 0;
z-index: 1000;
@media(max-width: 767px) {
padding: 15px 0;
}
.nb-logo {
width: 45px;
float: left;
}
.nb-logo a {
display: block;
}
.nb-logo img {
display: block;
}
}

.nb-hamburger {
float: right;
cursor: pointer;
transition: 0.6s all;
height:0;
}

.nav-up {
top: -75px;
transition: 0.2s all;
}
.nav-down {
transition: 0.2s all;
}
.nb-menu-bar {
text-align: center;
display: none;
background: #fff200;
position: fixed;
z-index: 100;
// right:0;
// top: 0;
// left: 0;
// width: 100%;

ul {
padding: 50px 0;
margin-top: 70px;
@media(min-width: 767px) {
padding: 200px 0;
}
}


li {
display: block;
margin: 25px 20px 0 20px;
@media(min-width: 767px) {
display: inline-block;
vertical-align: middle;
margin: 0 20px 0 20px;
}

@media(min-width:800px) {
margin: 0 20px 0 20px;
}

@media(min-width:1100px) {
margin: 0 30px 0 30px;
}

}

a {
display: block;
font-size: 25px;    
color: #1b1b1c;
font-weight: 700;

@media(min-width:800px) {
font-size: 28px;
}

@media(min-width:1100px) {
font-size: 36px;
}

span.nb-menu-sub {
font-size: 15px;
color: #4a4a4a;
display: block;
font-weight: $primary-weight;
margin-top: 5px;
@media(min-width: 991px) {
font-size: 18px;
margin-top: 15px;
}
}

}

span.nb-menu-link {
position: relative;
z-index: 1;
&::before {
content: '';
height: 5px;
width: 0;
display: inline-block;
border-radius: 2px;
background: #fff200;
position: absolute;
left: 0;
bottom: 5px;
z-index: -1;
transition: all 0.5s;
}
}

a:hover span.nb-menu-link:before {
width: 100%;
}




}




.hamburger-content {
display: none;
background: #0000;
}

.hamburger-container {
display: inline-block;
padding: 15px 0 15px 15px;
margin-left: 20px;
cursor: pointer;
}

.hamburger-grid {
width: 20px;
transition: all 0.5s;
}

.hamburger-line {
height: 2px;
width: 20px;
display: block;
background: #000;
margin-top: 5px;
}

.nb-hamburger.is-open {
  height:250px;
  transition: 0.3s;
}
.nb-logo.row-fluid {
    float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header class="nb-header row-fluid">
    <div class="container-fluid">
       <div class="nb-logo row-fluid">
          <a href="#">
          logo
          </a>
       </div>
       <div class="nb-hamburger">
          Hamburger
       </div>
    </div>
   </header>
   <!--nb-header-->
   <div class="nb-menu-bar row-fluid">
      <div class="container-fluid">
         <ul>
  <li> <a href="#"> <span class="nb-menu-link"> Work </span> <span class="nb-menu-sub">
     What we’ve done </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Services </span> <span class="nb-menu-sub">
     What we do </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Studio </span> <span class="nb-menu-sub">
     Who we are </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Contact </span> <span class="nb-menu-sub">
     Get in touch </span> </a> 
  </li>
  <li> <a href="#"> <span class="nb-menu-link"> Careers </span> <span class="nb-menu-sub">
     Join the team </span> </a> 
  </li>
      </ul>
                </div>
             </div>
             </body>