JQuery屏幕大小功能以及滚动顶部

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

使用此代码，所有窗口调整大小、加载和滚动问题都将得到解决。只需要定义scrlTop& 的值winWidth。&nbsp;$(document).ready(function(){&nbsp; &nbsp; var scrlTop = 100;&nbsp; &nbsp; var winWidth = 960;&nbsp; &nbsp; function changeStyle(){&nbsp; &nbsp; &nbsp; &nbsp; if ($(window).scrollTop() > scrlTop && $(window).innerWidth() < winWidth) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.hoverItem').css("line-height", "55px");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#header').css("background", "rgba(255, 255, 255, 1.0)");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#header').css("box-shadow", "0 4px 6px -6px #f8f8f8");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.hoverItem').css("line-height", "105px");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#header').css("background", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#header').css("box-shadow", "none");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; changeStyle();&nbsp; &nbsp; $(window).on('scroll resize', function(){&nbsp; &nbsp; &nbsp; &nbsp; changeStyle();&nbsp; &nbsp; });});