Question

I’ve followed a tutorial to add to my site a fixed header after scroll and the logo of the site appear on the fixed part.

That works, the code:

var nav_container = $(".nav-container");
var nav = $("nav");
var logo = $("logo");

nav_container.waypoint({
    handler: function(event, direction) {
        nav.toggleClass('sticky', direction=='down');
        logo.toggleClass('logo_sticky', direction=='down');
        if (direction == 'down')
            nav_container.css({ 'height' : nav.outerHeight() });
        else
            nav_container.css({ 'height' : 'auto' });
    });
});

How can I add a delay with fade-in to the logo, so it doesn’t appear suddenly?

Versions I’ve tried:

logo.toggleClass('logo_sticky', direction=='down').delay(500).fadeIn('slow');

logo.delay(500).toggleClass('logo_sticky', direction=='down').fadeIn('slow');

(before the toggleClass)

logo.delay(500).fadeIn('slow')
logo.toggleClass('logo_sticky', direction=='down');

(after the toggleClass)

logo.toggleClass('logo_sticky', direction=='down');
logo.delay(500).fadeIn('slow')

To be honest I’ve tried every single combination that came to my mind lol
new version that I’m trying that don’t work either:

$(function() {
        var nav_container = $(".nav-container");
        var nav = $("nav");
        var logo = $("logo");
        $.waypoints.settings.scrollThrottle = 30;

        nav_container.waypoint({
            handler: function(event, direction) {
                if (direction == 'down'){
                    nav_container.css({ 'height':nav.outerHeight() });
                    nav.addClass('sticky', direction=='down').stop();
                    logo.css({"visibility":"visible"}).fadeIn("slow");
                }
                else{
                    nav_container.css({ 'height':'auto' });
                    nav.removeClass('sticky', direction=='down').stop();
                    logo.css({"visibility":"hidden"});
                }
                },
            offset: function() {
                return (0);
            }   
        });
    });

but if I instead of fadeIn put toggle it animes the change but in a bad direction (the img appear and then toggle to disapear)
thanks

Answer 1

It seems like the fadeIn only works if you don’t have the css the property visibility: hidden, but display:none…

you can do a element.hide(); and then element.fadeIn().
since the hide() changes the layout of the page because it eliminates the item from it this is the solution I came across:

    $(function() {
  // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        var logo = $("logo");
        $.waypoints.settings.scrollThrottle = 30;

        nav_container.waypoint({
            handler: function(event, direction) {
                if (direction == 'down'){
                    nav_container.css({ 'height':nav.outerHeight() });
                    nav.addClass('sticky', direction=='down').stop();
                    logo.css('opacity',0).animate({opacity:1}, 1000);
                }
                else{
                    nav_container.css({ 'height':'auto' });
                    nav.removeClass('sticky', direction=='down').stop();
                    logo.css('opacity',1).animate({opacity:0}, 1000);
                }
                },
            offset: function() {
                return (0);
            }   
        });
    });