仅媒体查询不能按预期运行

ear

我正在尝试编写一些与我的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')
                        });
                    }

被重复。我如何缩小该部分,因为它以任何方式在每个媒体查询中都被回收。

编辑:我是否应该将该重复块放入函数,然后每次调用它?

我在这里想念什么?谢谢你。

月球漫步者

也许您应该将默认块放在顶部(如果它适合大多数情况)以使其具有优先级。并将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');
				});
			}
		}
	}
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Sinatra cookie不能按预期运行

来自分类Dev

Sinatra cookie不能按预期运行

来自分类Dev

sendmsg()不能按预期运行

来自分类Dev

我的媒体查询没有按预期工作

来自分类Dev

递归查询SQL Server不能按预期工作

来自分类Dev

为什么我的Scrapy蜘蛛不能按预期运行?

来自分类Dev

为什么PowerPC的stfs指令不能按预期运行?

来自分类Dev

为什么这个`grep -v`不能按预期运行?

来自分类Dev

为什么max()函数不能按预期运行?

来自分类Dev

:not()不能按预期工作

来自分类Dev

:not()不能按预期工作

来自分类Dev

媒体查询未运行

来自分类Dev

AutoResizeTextView不能按预期工作

来自分类Dev

getElementById不能按预期工作?

来自分类Dev

递归IEnumerable不能按预期工作?

来自分类Dev

jQuery slideDown不能按预期工作

来自分类Dev

递归函数不能按预期工作

来自分类Dev

Javascript RegExp'*'不能按预期工作

来自分类Dev

strtoul()不能按预期工作?

来自分类Dev

sendRedirect()不能按预期工作

来自分类Dev

$ nin与$ elemMatch不能按预期工作

来自分类Dev

终于不能按预期工作

来自分类Dev

whenAll()不能按预期工作

来自分类Dev

arraylist不能按预期工作

来自分类Dev

QGridLayout不能按预期工作

来自分类Dev

unset()不能按预期工作

来自分类Dev

onclick不能按预期工作

来自分类Dev

bcrypt nodejs不能按预期工作

来自分类Dev

NavigationManager不能按预期工作?