CODEWITHSUNDEEP
jquery
bsod99
bsod99

Reputation: 1297

Sticky element - unset when reach scroll reaches footer

Trying to find a neat way of handling unsetting fixed "sticky" items when the footer is reached - example at JSFiddle - can't figure out the correct calculation to set for this. Any pointers much appreciated!

var menu = $('.nav-wrapper');
            var blogMeta = $('.blog-meta');
            var stickyOffset = menu.offset().top;
            var maxwidth = blogMeta.width();
            var footerOffset = $('#footer').offset().top;       

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

                if (scroll >= stickyOffset) 
                {
                    menu.addClass('sticky');
                    blogMeta.addClass('sticky');
                    blogMeta.css("max-width",maxwidth+"px");
                }
                else {
                    menu.removeClass('sticky');
                    blogMeta.removeClass('sticky');
                    blogMeta.css("max-width","initial");
                }
            });

Upvotes: 1

Views: 932

Answers (2)

Shikkediel
Shikkediel

Reputation: 5205

Reading the question and your comment, this would be the expected result :

Fiddle

jQuery(document).ready(function($) {

var menu = $('.nav-wrapper');
var blogBody = $('.blog-body');
var blogMeta = $('.blog-meta');
var stickyOffset = menu.offset().top;
var space = blogMeta.outerHeight();
var edge = $('#footer').offset().top-90-space;
var maxwidth = blogMeta.width();

$(window).scroll(function () {

    var scroll = $(window).scrollTop(),
    stuck = menu.hasClass('sticky');

    if (scroll > stickyOffset && scroll < edge) {
    if (!stuck) {
    menu.add(blogMeta).addClass('sticky');
    blogBody.css('margin-top', space)
    blogMeta.css('max-width', maxwidth);
    }
    }
    else if (stuck) {
    menu.add(blogMeta).removeClass('sticky');
    blogBody.css('margin-top', 0)
    blogMeta.css('max-width', 'initial');
    }
});
});

You'll see the upper content jump back into place though so I'm not completely sure that's what you had in mind. Also added some margin to .blog-body with the same height as .blog-meta when initially switching so there isn't a jump occuring...

Upvotes: 2

Diptox
Diptox

Reputation: 1809

Here is a Demo, just the Bottom of the #footer , fixed it to -600px , change it on what ever you want 

        jQuery(document).ready(function ($) {
            var menu = $('.nav-wrapper');
            var blogMeta = $('.blog-meta');
            var footer = $('#footer');
            var stickyOffset = menu.offset().top;
            var maxwidth = blogMeta.width();
            $(window).scroll(function () 
            {
                var scroll = $(window).scrollTop();

                if(scroll >= $(window).height()-footer.height())
                {
                    footer.removeClass("stickyFooter");
                }
                else
                {
                    footer.addClass("stickyFooter");
                }

                if (scroll >= stickyOffset) 
                {
                    menu.addClass('sticky');
                    blogMeta.addClass('sticky');
                    blogMeta.css("max-width",maxwidth+"px");
                }
                else {
                    menu.removeClass('sticky');
                    blogMeta.removeClass('sticky');
                    blogMeta.css("max-width","initial");
                }
            });
        });

Upvotes: 0

Related Questions