Question

我正在使用下面的jQuery使页眉粘滞并在用户向下滚动页面时固定到位，但我只希望#logo在屏幕宽度小于768px时设置为display: none;（我已经使用了各种样式表和媒体查询。

jQuery(window).scroll(function(){
        if( jQuery(window).scrollTop() > stickyHeaderTop ) {
                jQuery('.stickyheader').css({position: 'fixed', top: '0px'});
                jQuery('.stickyalias').css('display', 'block');
                jQuery('.stickyheader #logo').css('display', 'none');
        } else {
                jQuery('.stickyheader').css({position: 'static', top: '0px'});
                jQuery('.stickyalias').css('display', 'none');
                jQuery('.stickyheader #logo').css('display', 'block');
        }
});

我怎么能只针对这种情况触发jQuery('.stickyheader #logo').css('display', 'none');？提前谢谢。

Answer 1

最好在CSS文件中添加/删除一个类：

@media all and (max-width:768px) {
    .hide_if_under_768px {display:none}
}

一般来说，将原始CSS放入JavaScript中是一个坏主意（出于使用style="css here"属性通常不好的原因）

修改jQuery只根据屏幕宽度触发特定的CSS

1 个答案: