上滚动不工作

改变的Javascript菜单的Else语句所以我有这样的菜单，当你滚过页面的第一部分改变（我把它叫做“旗帜”），并在其响应的形式变成一个典型的切换菜单向下滑动的栏。上滚动不工作

<header class="ease"> 
    <div class="menu-toggle"><img src="imgs/vap-designs-logo-black.svg" class="logo" alt="Vap Designs - Logotype" /></div> 
    <a href="index.html"><img src="imgs/vap-designs-logo.svg" class="logo" alt="Vap Designs - Logotype" /></a> 
    <nav> 
     <ul> 
      <li><a href="about.html" class="menu">about</a></li> 
      <li><a href="graphic.html" class="menu">graphic</a></li> 
      <li><a href="video.html" class="menu">video</a></li> 
      <li><a href="contact.html" class="menu">contact</a></li> 
     </ul> 
    </nav> 
</header>

当用户调整窗口大小时，我使用Javascript来更改其css属性。类'header-white'改变了标题的背景颜色和高度（我喜欢这样做，而不是仅仅通过Javascript添加属性）。重点是，当窗口宽度小于768px时，我希望我的头文件永久具有类'标题 - 白色'。它似乎一直工作，直到你向上或向下滚动的时候，即使在else语句中它没有被指定这样做。

这是脚本：

$(window).resize(function() { 
    h = $('.banner').height(); 

    if ($(window).width() > 768) { 

     $('nav').css({'display' : 'block'}); 
     $('header').removeClass('toggle-white'); 

     if ($(document).scrollTop() > h) { 
      $('header').addClass('header-white'); 
      $('header > a img').attr('src', 'imgs/vap-designs-logo-black.svg'); 
     } else { 
      $('header').removeClass('header-white'); 
      $('header > a img').attr('src', 'imgs/vap-designs-logo.svg'); 
     } 

     $(window).on('scroll', function(){ 
      if ($(window).scrollTop() >= h){ 
       $('header').addClass('header-white'); 
       $('header > a img').attr('src', 'imgs/vap-designs-logo-black.svg'); 
      } else { 
       $('header').removeClass('header-white'); 
       $('header > a img').attr('src', 'imgs/vap-designs-logo.svg'); 
      } 
     }); 
    } else { 
     $('nav').hide(); 
     $('header').addClass('header-white'); 
    } 
}).resize();

来源

2017-10-08 Vap Designs

你必须删除在“滚动”处理程序时的窗口变小，否则仍时滚动窗口叫，无论大小。 – Ossip

您需要删除的其他部分的“滚动”的处理程序，否则它仍然引发即使原来的条件不符合。你可以是这样做的：

$(window).off('scroll')

（或者，如果你有多个滚动处理程序，保存在变量函数，并传递给双方。对和.off）

来源

2017-10-09 03:17:47 Ossip

你好，为你工作吗？ – Ossip

上滚动不工作

回答

相关问题