Question

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

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

当窗口最小化小于480px时，我将导航变为固定位置和垂直。还有一个顶部：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

如果窗口大小小于480px，您可以刷新页面。

添加此代码..

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

这应该让你的另一个脚本再次运行，一切都应该很好。

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

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

1 个答案: