javascript - JQuery 屏幕尺寸功能以及滚动顶部

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

Improve this question

我尝试向下面的函数添加屏幕尺寸，但不起作用。我被困住了。以下作品...

$(document).ready(function(){


        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.hoverItem').css("line-height", "55px");
                $('#header').css("background", "rgba(255, 255, 255, 1.0)");
                $('#header').css("box-shadow", "0 4px 6px -6px #f8f8f8");           
            } else {
                $('.hoverItem').css("line-height", "105px");
                $('#header').css("background", "none");
                $('#header').css("box-shadow", "none");         
            }
        });

});
</script>

但是当我添加屏幕尺寸时它不起作用......

<script>
$(document).ready(function(){
    if ($(window).width() < 960) {

        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.hoverItem').css("line-height", "55px");
                $('#header').css("background", "rgba(255, 255, 255, 1.0)");
                $('#header').css("box-shadow", "0 4px 6px -6px #f8f8f8");           
            } else {
                $('.hoverItem').css("line-height", "105px");
                $('#header').css("background", "none");
                $('#header').css("box-shadow", "none");         
            }
        });
    };
});
</script>

我们将不胜感激您的建议。

Answer 1

看不到您的代码有任何问题......工作正常:

$(document).ready(function(){
    if ($(window).width() < 960) {
        console.log('window width: ' + $(window).width() + 'px');
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('#header').css("background", "blue");       
            } else {
                $('#header').css("background", "red");     
            }
        });
    };
});

#header {
  height:50px;
  width:100%;
  position:fixed;
  top:0px;
  background:red;
  color: white
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div style="height:3000px;">
  <div id="header">HEADER</div>
</div>