javascript - 在窗口调整大小 removeAttr

Question

我有一个固定的菜单贴在顶部。当我从顶部开始向下滚动页面 1px 时，我的固定菜单将改变样式。但是当我使网站响应并调整窗口大小时，最近添加的样式并没有消失(在第一次向下滚动并返回之后)。

希望这有点清楚。

这是我的 jQuery:

jQuery(document).ready(function(){       
    var scroll_pos = 0;

    var windowWidth = jQuery(window).width();

    if (windowWidth > 768) {

        jQuery(document).scroll(function() { 

            scroll_pos = jQuery(this).scrollTop();
            if(scroll_pos > 1) {
                jQuery("nav").css('background-color', 'black');
                jQuery("nav").css('padding', '10px 0px');
                jQuery("nav").css('transition', '0.3s ease-in-out all');
            } else {
                jQuery("nav").css('background-color', 'rgba(0, 0, 0, 0.4)');
                jQuery("nav").css('padding', '20px 0px');
                jQuery("nav").css('transition', '0.3s ease-in-out all');
            }
        });
    } else {
    jQuery(window).resize(function() {
        jQuery("nav").removeAttr("style");
    });
    }
});

我的 HTML 结构是这样的:

<div class="toggle">
    <img src="images/menu.png">
</div>

<nav>
    <ul>
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
    </ul>
</nav>

感谢您的帮助

Answer 1

创建一个新的 javascript 函数，例如:

function resize() {

    var scroll_pos = 0;
    var windowWidth = jQuery(window).width();
    jQuery(document).scroll(function() { 
        if (windowWidth > 768) {
            scroll_pos = jQuery(this).scrollTop();
            if(scroll_pos > 1) {
                jQuery("nav").css('background-color', 'black');
                jQuery("nav").css('padding', '10px 0px');
                jQuery("nav").css('transition', '0.3s ease-in-out all');
            } else {
                jQuery("nav").css('background-color', 'rgba(0, 0, 0, 0.4)');
                jQuery("nav").css('padding', '20px 0px');
                jQuery("nav").css('transition', '0.3s ease-in-out all');
            }
        } else {
            jQuery("nav").removeAttr("style"); 
        }
    });
}

然后您可以在调整屏幕大小时轻松调用它。

$(document).ready(function(){
    resize();
});
$(window).resize(function(){
    resize();
});