Javascript 组合宽度媒体查询和JQuery滚动顶部

我是jQuery新手，并且已经成功地实现了这段代码，当用户向下滚动100px时，我的头会粘住

但是，在使用媒体查询时，我将高度降低到了80px，最大宽度为650px，因此，对于650px及以下，我需要jQuery以80px而不是100px的速度启动

有没有办法将媒体查询与jQuery结合起来

到目前为止，我的jQuery是：

 jQuery(window).scroll(function(){
        if (jQuery(window).scrollTop() >= 100) {
            jQuery('#masthead').addClass('fixed-header');
        }
        else {
            jQuery('#masthead').removeClass('fixed-header');
        }
    });
    

CSS

我试了一下：

    if ($(window).width() >= 651) { 

        
                                    jQuery(window).scroll(function(){
                                        if (jQuery(window).scrollTop() >= 100) {
                                            jQuery('#masthead').addClass('fixed-header');
                                        }
                                        else {
                                            jQuery('#masthead').removeClass('fixed-header');
                                        }
                                    });
                                }


else {


                                jQuery(window).scroll(function(){
                                    if (jQuery(window).scrollTop() >= 80) {
                                        jQuery('#masthead').addClass('fixed-header');
                                    }
                                    else {
                                        jQuery('#masthead').removeClass('fixed-header');
                                    }
                                });
                             }   

}

及

但两者都不起作用

**编辑

我在这里打了个盹儿

我打算确保第二个收割台在到达顶部时能够粘住，这是我目前想要的。但是，当我将650px及以下的顶部收割台高度降低到80px时，会有一个跳跃，因为第二个收割台上的粘性位置仍然适用于

scrollTop

100px

---

任何帮助都将不胜感激

您可以使用

位置：sticky

而不是依赖jQuery:

.content正文{
高度：1000px；
背景色：#dbdb；
}
p{
保证金：0；
}
.收割台顶部{
宽度：100%；
高度：100px；
背景色：#A0；
}
#桅顶{
宽度：100%；
高度：100px；
背景色：#fbc957；
位置：粘性；
排名：0；
}
.固定收割台{
位置：固定！重要；
排名：0；
宽度：100%；
}
@介质（最大宽度：650px）{
.收割台顶部，
#桅顶{
高度：80px；
}
}

我在这个横幅上有一个标志

此横幅中有一个次要徽标

您可以通过测量桅杆头的高度并根据其采取行动来轻松解决此问题：

function getMastheadHeight() {
    return jQuery('#masthead').height();
}

jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead').addClass('fixed-header');
    }
    else {
        jQuery('#masthead').removeClass('fixed-header');
    }
});


jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead:not(.menu-absolute)').addClass('sticky-mob-menu');
    }
    else {
        jQuery('#masthead:not(.menu-absolute)').removeClass('sticky-mob-menu');
    }
});

小提琴：

---

简而言之：答案是肯定的，您可以将jQuery和CSS结合起来。请试试上面的小提琴。为了便于测试，我更改了媒体查询，但您可以将其更改回来，而不会出现问题。正如Daniel Knights指出的那样，您也可以使用CSS来解决这个特定的问题（对这个答案投了赞成票），但是对于没有CSS解决方案的情况，值得记住的是，您也可以通过编程来解决这些问题。

如果您创建一个易于复制的JSFIDLE，我很高兴为您解决这个问题。您好，太好了，谢谢。我制作了一把小提琴，并将其添加到原始问题中有什么原因你不能使用

位置：Stick

？@Daniel_Knights老实说，我不知道位置Stick，但我尝试将其添加到top:0中，但它不起作用？添加了一个带有工作示例的答案@mrtoad谢谢你，出于某种原因，我无法让它起作用，尽管能清楚地看到它在snippit中工作？这种棘手的局面根本不会发生。如果可以的话，我会平分这笔赏金，但另一个答案奏效了，所以我把它给了他们。谢谢你

if ( pageWidth > 651 ) {
    
                        jQuery(window).scroll(function(){
                                if (jQuery(window).scrollTop() >= 100) {
                                    jQuery('#masthead').addClass('fixed-header');
                                }
                                else {
                                    jQuery('#masthead').removeClass('fixed-header');
                                }
                            });
                        
                        }

else {


                        jQuery(window).scroll(function(){
                            if (jQuery(window).scrollTop() >= 80) {
                                jQuery('#masthead').addClass('fixed-header');
                            }
                            else {
                                jQuery('#masthead').removeClass('fixed-header');
                            }
                        });

                    }
}

function getMastheadHeight() {
    return jQuery('#masthead').height();
}

jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead').addClass('fixed-header');
    }
    else {
        jQuery('#masthead').removeClass('fixed-header');
    }
});


jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead:not(.menu-absolute)').addClass('sticky-mob-menu');
    }
    else {
        jQuery('#masthead:not(.menu-absolute)').removeClass('sticky-mob-menu');
    }
});