javascript - 仅媒体查询未按预期运行

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 没有产生预期的效果，而且我的代码效率低得令人难以置信，主要 block 是:

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

正在重复。我该如何削减该部分，因为它会以任何方式在每个媒体查询中被回收。

编辑:我是否应该将该重复 block 放入一个函数中，然后每次都调用它？

我在这里错过了什么？谢谢。

Answer 1

也许您应该将默认 block 放在顶部(如果它适合大多数情况)以赋予其优先级。并向默认 block 添加一个 if 条件，这与您在媒体查询中所做的相反。最后用 if else 条件加入它们:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>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');
				});
			}
		}
	}
});</code></pre>
</div>
</div>