僅媒體查詢不能按預期運行

Question

我正在嘗試編寫一些與我的CSS媒體僅查詢同時響應的jQuery。

我有一些對象可以在特定的滾動點滑動到網頁上。 但是為了保持對象的響應速度，我需要使用媒體查詢來更改滾動點。

這是代碼：

jQuery(window).scroll(function () {

            //media query scroll point @ min 768, max 995

            if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >= 768) {
                if (jQuery(this).scrollTop() > 400) {
                    if (jQuery('.rightSlideB').hasClass('visible') == false) {
                        jQuery('.rightSlideB').stop().animate({
                            right: '0px'
                        }, function () {
                            jQuery('.rightSlideB').addClass('visible')
                        });
                    }
                }
            } //end media query

            //default scroll point

            if (jQuery(this).scrollTop() > 250) {
                if (jQuery('.rightSlideB').hasClass('visible') == false) {
                    jQuery('.rightSlideB').stop().animate({
                        right: '0px'
                    }, function () {
                        jQuery('.rightSlideB').addClass('visible')
                    });
                }
            } //end default scroll point
        }); //end function

我的內容響應的唯一媒體屏幕是這樣的：

@media only screen and (min-width: 768px) and (max-width: 995px) {}

jQuery不僅不能產生理想的效果，而且我的代碼效率低下，其主要功能塊：

if (jQuery('.rightSlideB').hasClass('visible') == false) {
                        jQuery('.rightSlideB').stop().animate({
                            right: '0px'
                        }, function () {
                            jQuery('.rightSlideB').addClass('visible')
                        });
                    }

被重復。 我如何縮小該部分的大小，因為它以任何方式在每個媒體查詢中都被回收。

編輯：我應該將重復塊放入函數，然后每次調用它嗎？

我在這里想念什么？ 謝謝。

Answer 1

也許您應該將默認塊放在頂部（如果適用於大多數情況）以使其具有優先級。 並將if條件也添加到默認塊中，這與您在媒體查詢中所做的相反。 最后，如果有其他條件，請加入他們：

  
 
  
  
 
   
 
    
jQuery(window).scroll(function () {
	if (document.documentElement.clientWidth > 995) {
		if (jQuery(this).scrollTop() > 250) {
			if (jQuery('.rightSlideB').hasClass('visible') === false) {
				jQuery('.rightSlideB').stop().animate({
					right: '0px'
				}, function () {
					jQuery('.rightSlideB').addClass('visible');
				});
			}
		}
	} else if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >= 768) {
		if (jQuery(this).scrollTop() > 400) {
			if (jQuery('.rightSlideB').hasClass('visible') === false) {
				jQuery('.rightSlideB').stop().animate({
					right: '0px'
				}, function () {
					jQuery('.rightSlideB').addClass('visible');
				});
			}
		}
	}
});
 
   
 
  

Answer 2

所以這是我的最終解決方案。

首先，我將重復的代碼塊轉換為一個函數：

$.fn.fromRight = function () {
            if (jQuery('.rightSlideB').hasClass('visible') === false) {
                jQuery('.rightSlideB').stop().animate({
                    right: '0px'
                }, function () {
                    jQuery('.rightSlideB').addClass('visible');
                });
            }
        };

接下來，我設置新的媒體查詢（根據最受歡迎的移動設備），然后在每次需要檢查滾動高度時調用該函數：

jQuery(window).scroll(function () {
            if (document.documentElement.clientWidth > 1440) {
                if (jQuery(this).scrollTop() > 250) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 1440 && document.documentElement.clientWidth > 1366) {
                if (jQuery(this).scrollTop() > 275) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 1366 && document.documentElement.clientWidth > 1280) {
                if (jQuery(this).scrollTop() > 325) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 1280 && document.documentElement.clientWidth > 800) {
                if (jQuery(this).scrollTop() > 400) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 800 && document.documentElement.clientWidth > 768) {
                if (jQuery(this).scrollTop() > 475) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 768 && document.documentElement.clientWidth > 600) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 600 && document.documentElement.clientWidth > 567) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 567 && document.documentElement.clientWidth > 414) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 414 && document.documentElement.clientWidth > 384) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 384 && document.documentElement.clientWidth > 375) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 375 && document.documentElement.clientWidth > 360) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 360 && document.documentElement.clientWidth > 320) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 320) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            }

        });

現在，我只需要廢棄舊的CSS媒體查詢並關注這些新查詢。 有了，響應式網頁設計非常有趣，不是嗎？ ;）