как создать эффект ручки scribd navbar

Question

С помощью плагина jquery.waypoints вы можете легко создавать липкие элементы.На демонстрационной странице sticky elements показана панель навигации, которая по умолчанию располагается немного ниже верхней части страницы, а затем имеет следующее поведение: a) когда пользователь прокручивает страницу вниз и панель навигации попадает в верхнюю часть области просмотра, которую он придерживаетсятам б) когда пользователь прокручивает обратно вверх страницы, навигационная панель возвращается в свое нормальное положение.

Я пытаюсь сделать что-то подобное, но несколько наоборот, что является точно таким же эффектом, как и scribdNavbar.Начните с самого низа этой страницы scribd и медленно прокрутите вверх, чтобы увидеть эффект.

Как это сделать?Я предполагаю, что путевые точки облегчили бы это.Спасибо.

Answer 1

Вот решение, которое я нашел, но все еще заинтересован в других реализациях.

js:

//#bottomOfEl is the element you want to stick to the bottom of
$("#bottomOfEl").waypoint(function(ev, dir){ 
    $("#navbar").toggleClass('sticky', dir === "up");
    ev.stopPropagation();
}, {
    offset: function() {return $.waypoints('viewportHeight') 
                                - $(this).height() 
                                - $("#navbar").height();
            } 
})   

css:

#navbar {
    height: 40px;
    width: 500px;
    z-index: 10;
}
.sticky { 
    position: fixed;
    bottom: 0px;
}