0

I need to implement this effect which you can see here

https://youtu.be/3_aysne5P6A

This is my current implementation:

https://youtu.be/wIvi6CaOTsA

Basically as user scrolls down, the div goes up almost to the top where it stops, then as user scrolls down almost close but not yet at the bottom of page the same div now goes up and dissappears.

I do not know what this effect could be called so I can't google for it.

How would I implement something like this, is css enough or would javascript need to be involved?

Are there any examples on the net of this that are easy to follow that you have links to?

niko craft
  • 2,893
  • 5
  • 38
  • 67
  • 1
    That is called a "sticky" behaviour, if you're looking for a word. – Terry Jan 25 '17 at 22:13
  • CSS that could be some day avalaible would be `position:sticky` http://codepen.io/gc-nomade/pen/VPMZoq only FF seems to allow it at this time, chrome now needs some tunning to allow experimental CSS Polyfill can be used (javascript). https://www.sitepoint.com/css-position-sticky-introduction-polyfills/ – G-Cyrillus Jan 25 '17 at 23:12

1 Answers1

1

What you are looking for is a sticky navbar/element

http://jsfiddle.net/mariusc23/s6mLJ/31/

    // Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

This one is for hide on scroll down and show on scroll up, just replace those in the code and you should be good ;)

Krystian Borysewicz
  • 784
  • 10
  • 23