如何讓類在jQuery中滾動時消失

我想了解如何在瀏覽器中滾動時使類消失。當使用此代碼滿足瀏覽器中的某個高度時，我已能夠創建一個類。如何讓類在jQuery中滾動時消失

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

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

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

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

，你可以看到它在行動here.這樣，當你點擊該鏈接，減少瀏覽器的高度，然後另一個類將彈出。但是我需要找到方法來讓用戶向上滾動時該類再次消失，以免打擾其他課程。

所以在本質上，我把2級。一個類在向下滾動時會消失，然後由另一個類替換，並且當用戶向上滾動並由原始類替換時，我希望此另一個類也消失。任何想法如何在jQuery中？

來源

2017-10-15 jacobian

相當肯定，這是一個壞主意，使一類的腳本消失改變CSS屬性。您不必計算演示規則。這個力量是在css裏面的，與演示相關的是什麼。 –

好吧，代碼來自以前的開發人員，我只是繼續並從那裏擴展。 – jacobian

https://stackoverflow.com/a/4326907/1548821這可能有幫助 – link2pk

提出了一個非常類似的問題here。

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

來源

2017-10-15 03:28:06

媒體查詢最大高度似乎是一個更好的解決辦法，如果你想在我看來

來源

2017-10-15 11:07:22 hariaon

如何讓類在jQuery中滾動時消失

回答

相關問題