Display Nav on scroll up

Design help General
1

I’m wondering if someone could help me or offer advice on how I would create an interaction so that the Navigation bar is displayed when a user starts to scroll back up the page.

Essentially i’m trying to imitate this effect - The Biggest Problem in Design | by Julie Zhuo | The Year of the Looking Glass | Medium

many thanks

2

example: http://jesportfolio.webflow.com/ :wink:

code:

$(document).ready(function(){

    $('body').bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta < 0) {
            userScrollDown()
        } else {
            userScrollUp()
        }

    })
    
    function userScrollDown() {
        $('.navbar').css('top', '-103px')
    }
    function userScrollUp() {
        $('.navbar').css('top', '0')
    }

})