jquery - 当窗口变小时，垂直导航栏变为水平导航栏，边距问题

Question

我有一个包含 4 个部分的网站。

我在第 2 部分有一个垂直导航栏，当页面到达第 2 部分时，它会更改为固定位置，顶部:41。

当窗口最小化小于 480px 时，我将导航更改为固定位置和垂直。还有一个 top:0。

这是我正在使用的工作脚本。

var windowSize = $(window).width();
if (windowSize <= 479) {
$(window).scroll(function () {
    winHeight = $(window).height();
        if ($(window).scrollTop() > winHeight - 0) {
            $('.nav').css('position', 'fixed');
            $('.nav').css('top', '0px');
        } else if ($(window).scrollTop() < winHeight) {
            $('.nav').css('position', 'absolute');
            $('.nav').css('top', 'inherit');
        }
    })

} else {
$(window).scroll(function () {
    winHeight = $(window).height();
        if ($(window).scrollTop() > winHeight - 41) {
            $('.nav').css('position', 'fixed');
            $('.nav').css('top', '41px');
        } else if ($(window).scrollTop() < winHeight) {
            $('.nav').css('position', 'absolute');
            $('.nav').css('top', 'inherit');
        }
    });
}

当从小于 480 像素的窗口加载时，网站工作正常。

我遇到的问题是，当以大于 480 像素的大小加载然后最小化到小于 480 像素的大小时，边距不会改变。 .nav 在 css 中更改为水平，但除非刷新页面，否则脚本不会更改顶部位置。

还有41px的差距。

有人知道我可以解决这个问题的方法吗？

Answer 1

如果窗口调整到小于 480 像素，您可以只刷新页面。

添加这段代码..

$(window).resize(function() {
    if( $(this).width() < 480 ) {
       this.location.reload(false);
    }
});

这应该会让您的其他脚本再次运行，并且一切正常。

演示。 http://jsfiddle.net/0rwxx0uo/