Recreating Chrome iOS scrolling navigation bar effect in jquery/javascript

Question

I'm trying to achieve a similar effect to the way the iOS Chromes navigation bar scrolls and hides, the comes back into view when scrolling up.

This JSfiddle is where I am so far.

var pos = $(window).scrollTop(),
header = $("header");

$(window).scroll(function () {
var newPos = $(this).scrollTop();

if (newPos > pos) { //down 
    header.css('top', -(newPos) + 'px');
    if (pos > 40) {
        header.css('top', '-40px');
    }
} else { //up
    header.css('top', '0');
}


pos = newPos;

$(".last span").html(pos);
$(".new span").html(newPos);
});

So the header scrolls up as you scroll down, but I can't work out how to scroll it back into view in the way I want. Tried using animate() which gave me a scroll in and out, but the animation wasn't smooth. I' want the header to move at the same speed as as the scroll, any ideas?

Anyone? Perhaps my method is wrong (I'm not too hot with jQuery) so any assistance would be a great help. — EJP, Jul 27 '13 at 19:37
similar question here:http://stackoverflow.com/questions/17713389/how-to-hide-show-nav-bar-when-user-scrolls-up-down that works by using jQuery slideDown & slideUP. How can i control the animation rate to match the user scroll speed? — EJP, Jul 27 '13 at 21:41

score 0 · Accepted Answer · edited May 23 '17 at 12:28

I've a similar problem to achive the same effect, maybe this could help you: Slide header up if you scroll down and vice versa. It would be great to get see some "nerdy" people who can get this to work?!

To make it as you noted (the animating way), you could try something like this: http://jsfiddle.net/yckart/jzRfv/

However, I think it would be much nicer to get this working!

CSS

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    background: tomato;
    -webkit-transition: top 0.5s
}

JS

// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset) {
    return function (offset) {
        var dir = offset < oldOffset;
        oldOffset = offset;
        return dir;
    };
}());


var header = document.querySelector('header');
addEventListener('scroll', function () {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    header.style.top = -(scrollDir(scrollY) ? 0 : header.clientHeight/2) + 'px';
});

Recreating Chrome iOS scrolling navigation bar effect in jquery/javascript

1 Answers1