[vettel]

Здравствуйте.
На странице есть вертикальная панель навигации. Оформленная там, разные эффекты при наведении и т.д.
Решил сделать так, что, когда страница прокручивается до начала панели, она(панель) прикрепляется. Для того, чтобы ее всегда было видно. С этим проблем не возникло.
Но потом решил добавить кода для тех, кто изменит размер окна или масштаб. Принцип такой: если длина окна меньше длины навигационной панели, никакого прикрепления происходить не должно.
Вот код:

$(document).ready(function() {
    navVerticalShift();
});
 
$(window).resize(function() {
        navVerticalShift();
});
 
function navVerticalShift() {
    $('nav').css('position', 'static');
    var screenHeight = $(window).height();
    var topNav = $('nav').offset().top;
    var $width = $('nav').width();
    var $height = $('nav').height();
    
    if (screenHeight < $height) {
            return;
        }
    else {    
    $(window).scroll(function() {
        if ($(document).scrollTop() > topNav) {
                $('nav').css({top: '1px', position: 'fixed', width: $width + 'px'});
            }
        else {
                $('nav').css({position: 'static'});
            }
    });
    }
}

Событие window.resize добавил для тех, кто изменит масштаб страницы в браузере без обновления.

Но код в принципе не работает. При обновлении страницы - да, работает: если окно маленькое, прикрепления не происходит, если большое - происходит. Но напрямик при изменении размеров окна или масштаба - нет. Точнее, если окно стало маленькое, а потом большое - то все работает (сначала панель не прикрепляется, а при большом окне - прикрепляется).

А если окно было большое и прикрепление сработало, а потом я сделал его маленьким (или увеличил масштаб) - панель все равно остается прикрепленной. То есть нижней части панели пользователь так и не увидит.
Хотелось бы понять, в чем я ошибся и что не так делаю. Заранее благодарю.