Question

我一直在组建一个网站，我注意到当屏幕方向改变时，我的一些jQuery“ addclass”和“ hover”并没有被应用或删除。

例如，我有一个用于桌面的透明导航栏，在移动设备上具有完整的背景颜色，有时，当我更改设备的方向时，背景仍然是全色的，而不是变回透明。

我已经包含了所有必要的内容，以使我的网站具有响应能力-但似乎无法理解为什么我的JQuery如此脆弱。

如果有帮助，这是下面的我的JQuery。

var windowWidth = $(window).width();
if (windowWidth > 991) {
    //CHANGE LOGO ON HOVER
    $('.navbar-light').hover(function () {
        $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-fill.png');
    }, function () {
        $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-trans.png');
        });
    //TOGGLE SCROLLED
    $(document).scroll(function () {
        var $nav = $(".navbar-light");
        $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
    });
    // SHRINK LOGO 
    $(document).scroll(function () {
        var $nav = $(".logo-desk");
        $nav.toggleClass('shrink', $(this).scrollTop() > $nav.height());
    });
    $(window).scroll(function () {
        if ($(this).scrollTop() > 1) {
            //CHANGE LOGO
            $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-fill.png');
            //CHANGE TEXT COLOUR
            $('.navbar-light .navbar-nav .nav-link').css('color', '#494949');
            //CHANGE GIT TEXT COLOUR
            $('.git-container .git-title').css('color', '#494949');
            //ON HOVER CHANGE LOGO
            $('.navbar-light').hover(function () {
                $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-fill.png');
            });
        }
        if ($(this).scrollTop() <= 0) {
            $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-trans.png');
            $('.navbar-light .navbar-nav .nav-link').css('color', '#FFF');
            $('.git-container .git-title').css('color', '#FFF');
            $('.navbar-light').hover(function () {
                $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-fill.png');
            }, function () {
                $('.logo-desk a img').attr('src', '/Includes/images/logo/holts-logo-trans.png');
            });
        }
    });
}

jQuery addClass屏幕方向

0 个答案: