I have been experimenting with making classes appear and disappear based on scrolling behavior in a browser. I successfully made a class appear when reaching a certain height using the following code:
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>You can view this functionality in action here. When clicking on the link and reducing the browser height, a different class will pop up. Now, I am trying to figure out how to make this new class disappear again as the user scrolls back up, in order to maintain a smooth transition between classes.
In summary, I want one class to disappear as the user scrolls down, replaced by another class. And then, I want this second class to disappear as the user scrolls back up, reverting to the original class. Any suggestions on how to achieve this using jQuery?