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

Answer 2

媒体查询max-height似乎是一个更好的解决方案，如果你想在我看来改变css属性

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

2 个答案: