0

I am trying to find out how to make a class disappear when scrolling up in a browser. I had been able to make a class to appear when a certain height in a browser is met by using this 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 see it in action in here. so that when you click on that link and reduce your browser height then another class would pop up. But I need to finds way how to make that class to disappear again when a user scroll up so as not to disturb another class that were put there.

so in essence, I put 2 class. one class will disappear when scrolling down and then replace by another class and I want this another class to disappear also when a user scroll up and replace by original class. any idea how to that in jquery?

CyanCoding
  • 1,012
  • 1
  • 12
  • 35
jacobian
  • 327
  • 1
  • 5
  • 16
  • Pretty sure that this is a bad idea to make a class disappear with a script. You shouldn't have to compute presentation rules at all. The force is within css for what is presentation related. – Frederik.L Oct 15 '17 at 01:54
  • well, the code is from the previous developer, I merely continuing it and expanding from there. – jacobian Oct 15 '17 at 01:56
  • 1
    https://stackoverflow.com/a/4326907/1548821 this might be helpful – Praveen Oct 15 '17 at 01:59

2 Answers2

1

A very similar question is asked here.

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st < lastScrollTop){
       // upscroll code
       $(".tetapElement").removeClass("classToRemove");
   }
   lastScrollTop = st;
});
Santosh Kumar
  • 1,756
  • 15
  • 24
1

media query max-height seems to be a better solution if you want to alter css properties in my opinion

hariaon
  • 26
  • 3