javascript - 在jquery中向上滚动时如何使类消失

Question

我正在尝试了解如何在浏览器中向上滚动时让类消失。通过使用此代码，我已经能够在浏览器中达到特定高度时显示一个类。

jQuery(".tetapElement").css("opacity", 1);
 
 jQuery(window).scroll(function() {
	var windowHeight = jQuery(window).height();
	if (windowHeight < 470) {
	    jQuery(".tetapElement").css("opacity",1);
	} else if (windowHeight > 1820) {
	jQuery(".tetapElement").css("opacity",1);
}
else {
    jQuery(".tetapElement").css("opacity",0);
}
});

.tetapElement {
  	position:fixed;
		top: -30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--make another checkout button -->
		
		<div class="tetapElement">
			<div class="order_title">Order details:</div>
			<div class="order_bar_details">
				<div class="pack_name"><?php echo $post->post_title ;?></div>
				<div class="pack_name_value">Package name:</div>
				
				
				<div class="pack_details"></div>
				
				<div class="addon_title">Add-On Menu</div>
				<div class="addon_details"></div>
			</div>
			<div class="order_price">Total price (<?php echo $currency; ?>): <span class="total_price">0</span></div>
			
			<div class="chekout_link">

					<textarea id="order_details" style="display:none;" name="order_details" ></textarea>
					<?php wp_nonce_field('process_checkout_action','process_checkout_field'); ?>
					<input type="submit" class="btn btn-success checkout_btn mk-flat-button shop-black-btn" value="Checkout">
				
			</div>
			
		</div>

您可以在 here. 中看到它的实际效果这样当您单击该链接并降低浏览器高度时，就会弹出另一个类。但是我需要找到方法让该类在用户向上滚动时再次消失，以免打扰放在那里的另一个类。

所以本质上，我放了 2 级。向下滚动然后由另一个类替换时，一个类将消失，我希望当用户向上滚动并替换为原始类时，另一个类也消失。知道如何在 jquery 中做到这一点吗？

Answer 1

有人问了一个非常相似的问题here .

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st < lastScrollTop){
       // upscroll code
       $(".tetapElement").removeClass("classToRemove");
   }
   lastScrollTop = st;
});