Streaming live at 10am (PST)

Hide header on scroll down, show on scroll up – Won't work on mobile :(


#1

Hello,

Anyone know how to make this https://youtu.be/UjDFEWLp7po works on mobile? If you know how to figure it out, please contact me with your price. Must be done until tomorrow.

As you can see, i'm trying on Google Chrome browser (PC), but when i try on my mobile, wont work :cry:.
The scrollbar stays fixed. I'm using a Samsung Galaxy S6.

URL: http://specify.webflow.io/test-navbar

JS custom code at footer:

$(document).ready(function(){

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

    if(e.originalEvent.wheelDelta < 0) {
        // one liner - scroll down
        mistyScrollDown()
    } else {
        // one liner - scroll up
        mistyScrollUp()
    }

})

$('.navbar_container a').click(function(){

    if( $(this).hasClass('navbar_homebutton') ){
        mistyScrollUp()
    } else {
        mistyScrollDown()
    }

})

$('.fa-angle-down').click(function(){
    $('.about_gradient').remove()
    $('.about_column_left').css('height','auto')
    $('.resume_link').css({
        position:'relative',
        bottom:'0'
    })
})

// lets make some global functions

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

})

Thank you!

Renan


#2

Why not add a scroll interaction on the mobile side in webflow to change appearance to 0% opacity, or display: none ? Do you have a read only link to your site?


#3