javascript - 在触发一次后删除 If 语句

Question

是否有办法在触发一次后删除 if 语句？

我有一个在页面加载时显示的菜单容器，并且希望当用户滚动 1px 时它会滑开。但我不希望浏览器不断跟踪 scrollTop() 方法，因为这会影响性能。

在使用一次 if 语句后，删除或取消该语句的最佳方法是什么？

代码如下，我这里有一个代码笔: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>

Answer 1

听起来你实际上有两个条件。一种是基于滚动位置，另一种是基于要跟踪的某种状态。因此只需添加一个变量来跟踪该状态即可。也许是这样的:

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
});