刪除If語句後，它已被激發一次

是否有任何消除if聲明後，它已被解僱一次？刪除If語句後，它已被激發一次

我有一個菜單容器，顯示在頁面加載和想要它，所以當用戶滾動1px它滑過。我不想讓瀏覽器經常跟蹤scrollTop()方法，因爲這樣會導致性能下降。

使用過一次後，刪除或取消if語句的最佳方法是什麼？

的代碼如下，我有一個在這裏codepen：http://codepen.io/emilychews/pen/evbzMQ

jQuery(document).ready(function($) { 
 
    $(window).scroll(function() { 
 
    if ($(document).scrollTop() > 1) { 
 
     $('.menubox').css('left', '-25%'); 
 
    } 
 
    }); 
 

 
    $('.mybutton').on('click', function() { 
 
    $('.menubox').css('left', '0%'); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 200vh; 
 
} 
 

 
.menubox { 
 
    top: 100; 
 
    position: fixed; 
 
    width: 20%; 
 
    height: 100%; 
 
    background: red; 
 
    padding: 10px; 
 
    color: white; 
 
    transition: all 1s; 
 
} 
 

 
.mybutton { 
 
    position: fixed; 
 
    left: 40%; 
 
    top: 50px; 
 
    padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menubox">Menu Box</div> 
 
<button class="mybutton">menu</button>

來源

2017-03-31 The Chewy

聽起來像是你實際上有兩個條件。一個是基於滾動位置，另一個基於某個狀態進行跟蹤。所以只需添加一個變量來跟蹤該狀態。可能是這樣的：

var scrolled = false; 

$(window).scroll(function() { 
    if (!scrolled && $(document).scrollTop() > 1) { // check the state 
     $('.menubox').css('left', '-25%'); 
     scrolled = true; // update the state 
    } 
}); 


$('.mybutton').on('click', function() { 
    $('.menubox').css('left', '0%'); 
    scrolled = false; // don't forget to reset the state 
});

來源

2017-03-31 14:07:11 David

嗨大衛 - 謝謝你。現在我發現我的localhost網站上的這個bug很好用。我可以問 - 如果我想在點擊按鈕後的一段毫秒內暫時禁用滾動觸發器，我該怎麼做？我似乎只能找到關於setTimeOut的信息。原因是當按鈕被點擊以使菜單重新進入時，如果在菜單進入時有人意外滾動，則觸發它在動畫中途再次返回，並且將其移除1000ms的動畫。 –

@EmilyChewy：我想你可以做兩個發佈的答案建議的一些組合。也許使用一個變量來存儲狀態，但也可以設置一個超時，其回調函數再次更新該變量。所以你應該將'scrolled'設置爲true，然後使用'setTimeout'來安排一個將'scrolled'設置爲false的函數。（如果我正確理解所需的行爲。根據需要調整值，但我認爲一般方法可行。） – David

您可以在if聲明中稱off()刪除事件處理程序。

另外請注意，如果你關心性能，你可以去抖事件處理程序，使其只執行一次滾動停止N個毫秒的邏輯：

var scrollTimer; 

$(window).scroll(function() { 
    clearTimeout(scrollTimer) 
    scrollTimer = setTimeout(function() { 
    if ($(document).scrollTop() > 1) { 
     $('.menubox').css('left', '-25%'); 
     $(window).off('scroll'); 
    } 
    }, 150); 
});

來源

2017-03-31 14:04:00

一旦'scroll'處理程序被刪除，是不是需要重新添加到它下面的點擊處理程序中？ – David

我不這麼認爲，因爲OP聲明他們只希望'隱藏滾動'動作觸發一次。如果您再次手動打開菜單，則只能手動關閉它。如果情況並非如此，那麼你的回答更好地解決了這個問題 –

誠然，我認爲這涉及OP重新開放時期望的行爲。兩種方法都可以解決問題，具體取決於他們想要做什麼。 – David

刪除If語句後，它已被激發一次

回答

相關問題