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。

 $(document).ready(function(){

    var scrlTop = 100;

    var winWidth = 960;

    function changeStyle(){

        if ($(window).scrollTop() > scrlTop && $(window).innerWidth() < winWidth) {

            $('.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");         

        }

    }

    changeStyle();

    $(window).on('scroll resize', function(){

        changeStyle();

    });

});