上滾動不工作

改變的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

上滾動不工作

回答

相關問題