Липкая прокрутка навигации с нижней навигацией

Question

Я основываю свой проект на уже существующем коде, поэтому в целом это не должно быть сложно. Я думаю.

Это пример я основывая себя на: Sticky Scroll

function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) { 
     $('#sticky').addClass('stick'); 
    } else { 
     $('#sticky').removeClass('stick'); 
    } 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 

У меня есть скрипт для работы с моей навигационной панели. Единственное, что моя панель навигации находится в нижней части главной страницы. И она должна оставаться там, пока она не коснется вершины при прокрутке.

То, что я до сих пор: testpage

Теперь последний состояние моя страница, как я хотел, когда вы его просмотра первого. Я пробовал несколько вещей и получил код для работы, но без моего навигатора, расположенного внизу, я не могу работать.

Я предполагаю, что мне нужно что-то изменить в сценарии JQuery.

Моя цель - получить что-то вроде навигации по сидерам сиэтла, но главная страница должна иметь навигацию в нижней части. (Нет ссылки, потому что я здесь новый) (также искал форум «Их», где было какое-то решение, но не было не найти тот, который решает мой)

Answer 1

Переместите навигацию ниже первой секции, которая появляется, и дайте этому разделу высоту окна с помощью JQuery. Затем просто примените свой липкий код меню, и он должен работать нормально.

See this Fiddle

(function() { 
    //set the height of your section which makes sticky sit below it 
    // windowHeight alone will push it outside the window so do 
    //window height - whatever height your nav is 
    var winHeight = $(window).height(); 
    $('section').css('height', winHeight - 60 + 'px'); 


    //Your sticky relocate code  
    function sticky_relocate() { 
     var window_top = $(window).scrollTop(); 
     var div_top = $('#sticky-anchor').offset().top; 
     if (window_top > div_top) { 
      $('#sticky').addClass('stick'); 
     } else { 
      $('#sticky').removeClass('stick'); 
     } 
    } 

    $(window).scroll(sticky_relocate); 


})();