Question

我正在尝试编写一些jQuery，它同时响应我的CSS媒体查询。

我的对象可以在特定的滚动点滑动到网页上。但为了保持对象的响应，我需要使用媒体查询来更改滚动点。

下面是代码：

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条件添加到默认块，这与您在媒体查询中执行的操作相反。最后使用if else条件加入它们：



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媒体查询并关注这些新的查询。你有它，响应式网页设计是如此有趣不是吗？ ;）

仅媒体查询无法按预期运行

2 个答案: