Off canvas menu appear on scroll

Question

I've tried a lot of different things I've seen online (tutorials and videos) but I can't seem to get this to work.

What I have is a hero banner at the top with 100% width and height. The menu has been hidden up using -webkit-transform: translate(0,-100%); and once the user scrolls down to the bottom of the hero banner, the menu will then appear, sliding down using -webkit-transform: translate(0,0); within an addClass. I have used ease to animate it. However, my javascript isn't working.

Here is a jsfiddle

$(document).ready(function(){

var nav = $(".slide-nav-container");
var banner = $(".hero");

$(window).scroll(function() {

    var windowpos = $(window).scrollTop();

    if (windowpos >= banner.outerHeight()) {
        nav.addClass("slide-menu");
    } else {
        nav.removeClass("slide-menu");
    }

});

});

Answer 1

You are only checking for the height of the banner, you need to add it to the position too.

windowpos >= banner.outerHeight()+banner.offset().top

banner.offset().top will return you the position of the banner on your site, adding its height will be the bottom of the banner.