jQuery的調整

Question

當if語句我寫了一個功能，這使得它工作正常，如果您對設備（< 992）向下滾動固定我頂吧（$header）忽略。當我調整大小時，我再次使用函數fixedTopCheck()，它刪除了.fixed類（在else語句中）。這也很好。但是當我滾動時，它突然再次出現頂級.fixed。所以這部分被忽略if ($(window).width() < 992)（這隻發生在調整大小，如果我刷新992px以上的窗口，它工作正常）。

因此，這是調整大小的認可，$(window).width()搞亂？ （當我登錄控制檯時，它顯示正確的寬度大小）。

我的代碼：

$(function() 
{ 
    var $header = $('header.top'); 

    var $input = $header.find('input[type=search]'); 
    var $search = $header.find('div.search'); 
    var $container = $('main#content'); 
    var $searchBtn = $search.find('button.icon-search'); 
    var $closeBtn = $search.find('span.icon-cross'); 

    $closeBtn.css('display', 'none'); 


    function fixedTopCheck() 
    { 
     if ($(window).width() < 992) 
     { 
      $(window).on('scroll', function() 
      { 
       if ($(window).scrollTop() > 75) 
       { 
        $searchBtn.css('display', 'inline-block'); 
        $closeBtn.css('display', 'none'); 

        // Turn top into fixed menu 
        $header.addClass('fixed'); 
        $container.addClass('fixed'); 
        // Hide search bar and make it smaller 
        $input.css('display', 'none'); 

        // Prevent search button to search 
        $searchBtn.on('click', function(e) { 
         e.preventDefault(); 
        }); 


        // Open search bar when clicking button 
        $(document).on('click','.icon-search',function() 
        { 
         $searchBtn.unbind('click'); 
         $input.css('display', 'inline-block'); 
         $searchBtn.css('display', 'none'); 
         $closeBtn.css('display', 'inline-block'); 

         $input.focus(); 
        }); 

        // Close search bar when clicking button 
        $(document).on('click','.icon-cross',function() 
        { 
         $searchBtn.on('click', function(e) 
         { 
          e.preventDefault(); 
         }); 

         $input.css('display', 'none'); 
         $searchBtn.css('display', 'inline-block'); 
         $closeBtn.css('display', 'none'); 
        }); 
       } 
       else 
       { 
        // Reverse fixed menu 
        $header.removeClass('fixed'); 
        $container.removeClass("fixed"); 

        $input.css('display', 'inline-block'); 

        // Return search function 
        $searchBtn.unbind('click'); 

        // Reset search form when going top and search form is still opened 
        $searchBtn.css('display', 'inline-block'); 
        $closeBtn.css('display', 'none'); 
       } 
      }); 
     } 
     else 
     { 
      console.log("hello"); 
      // Remove fixed top 
      if($header.hasClass("fixed")) 
      { 
       $header.removeClass("fixed"); 
      } 

      if($container.hasClass("fixed")) 
      { 
       $container.removeClass("fixed"); 
      } 

      $searchBtn.css('display', 'inline-block'); 
      $closeBtn.css('display', 'none'); 
     } 
    } 

    fixedTopCheck(); 

    // if window is resized check again 
    $(window).resize(function() { 
     fixedTopCheck(); 
    }); 
}); 

Answer 1

您的代碼如下的陋習很多。

1. 不要將您的事件偵聽器嵌套在對方內。這將導致在每次容器事件觸發時在同一個組件上設置一個事件監聽器（每個調整大小都非常重要）。

2. 代替使用綁定和取消綁定，使檢查每個事件內的寬度，並按照取決於操作。

3. 在你的情況下替換綁定和解除綁定的另一種解決方案是保持默認按鈕事件，但禁用該按鈕，因此無法點擊而不是解除綁定。

這將會回答你的問題：

內調整大小添加事件，不會令他們只能在if語句上的大小工作，你必須把事件發生在resize事件之外，並檢查事件是否發生在滾動和大小上。

Answer 2

當頁面被加載，並且頁面的寬度爲< 992px，創建滾動事件。當您調整到> 992px時，滾動事件仍然存在。 我會建議綁定滾動事件只在頁面加載一次（不是每次調整大小後），並檢查該方法內的寬度，以決定它應該做什麼，當它滾動。