Автоматическая настройка точки видимости Navbar после прокрутки сверху вниз

Question

Составили липкий навигатор (jsfiddle), который появляется только после того, как пользователь прокручивает 10px от верхней части документа. Однако, как видно на скрипке; используя:

$(window).scroll(function() { 
    if ($(this).scrollTop() > 10) { 
    document.getElementById('navig').style.visibility = 'visible'; 

Это работает только в первом экземпляре после запуска кода. В последующих аналогичных действиях (после прокрутки документа полностью и прокрутка назад снова) в том же сеансе навигационная панель появляется намного дальше, чем 10 пикселей. Он снова работает только при обновлении (rereun), и это тоже снова, только первый пример прокрутки сверху вниз.

Кроме того, я бы хотел, чтобы эффект срабатывал при прокрутке назад, т.е. фиксированный навигатор должен стать абсолютным в основании заголовка, когда пользователь перемещается мимо этой точки. И он должен скрываться при прокрутке в 10 пикселей сверху. Нет функции scrollBottom(), так как это делается?

Эта скрипка была загружена JQuery: https://jsfiddle.net/6ss64s7e/

Как эти вопросы решать? (pardon, я новичок в javascript).

Answer 1

Прежде чем вы вернетесь к значению position:absolute;, вы должны удалить все остальные свойства, которые вы добавили, потому что они не будут автоматически удалены - так что вам больше не нужно top:0;.

Вы можете удалить top:0; свойство, передавая пустую строку, ее значение, например:

$('#navig').css({'position':'absolute','top':''}); 

Для обнаружения свитка и его направление, см this question.