CODEWITHSUNDEEP
jqueryjquery-waypoints
J. Hogue
J. Hogue

Reputation: 314

Waypoints new Sticky shortcut has no offset parameter?

The new Waypoint documentation points to a simple shortcut for initializing a "sticky" element on page scroll. My problem stems from the fact that the new documentation is a little thin on documentation when an offset is needed.

This code works great for me, so I know the plug in is working (and it is inside $().ready(function()) :

if($('.js-sticky').length > 0) {
    var sticky = new Waypoint.Sticky({
        element: $('.js-sticky')[0]
    });
}

This newer method does not have an option for offset built in, but the full non-shortcut version of Waypoints does. It would look like this: 

var waypoint = new Waypoint({
    element: $('.js-sticky'),
    handler: function(direction) {
        [do stuff]
    },
    offset: $(".head").outerHeight(true)
})

My problem is that I don't know what to do inside [do stuff] to replicate what the Waypoints Sticky shortcut already does, which is add a .stuck class, wrap the element with a placeholder div the same height as the element, and then destroy the placeholder when the user scrolls back to the top.

Has anyone done this with the newest version of Waypoints.js? Thanks ahead of time.

Upvotes: 2

Views: 3756

Answers (2)

J. Hogue
J. Hogue

Reputation: 314

With the answer above, this is my final working code, which does quite a bit more than I originally outlined, but may be helpful to to others working with this plugin.

Things to note: I am using a method to pass values from CSS to JS via the body::after pseudo element. See Jeremy Keith's post for the how/why. I am also doing some calculations to get the height of a CSS sticky header if it is present.

/*
 * "Watch" the body:after { content } to find out how wide the viewport is.
 * Thanks to http://adactio.com/journal/5429/ for details about this method
 */
function mqtag() {
    return window.getComputedStyle(document.body,':after').getPropertyValue('content');
}
var mq_tag = mqtag();

// If header is sticky, anchor links need an offset
if ( mq_tag.indexOf("stuck-header") !=-1 ) {
    // stickyoffset to account for
    //  -- header height
    //  -- secondary nav height
    //  -- padding-top for the .content section, which changes from 24px to 48px
    //      NOTE: We have to account for the .content padding-top in order to
    //            ensure that the secondary nav is stuck when the first waypoint
    //            article is scrolled to
    var contentPad = parseInt($('.content').css('padding-top'));
    var paddingOffset = (contentPad === 24 ? -30 : -5); 
    var stickyoffset = ($(".head").outerHeight(true) + $(".anchornav").outerHeight(true)) + paddingOffset;
} else {
    var stickyoffset = 0;
}

if($('.js-sticky').length > 0) { // Check that this class exists on the page
    var sticky = new Waypoint.Sticky({
        element: $('.js-sticky')[0],
        offset: $(".head").outerHeight(true)
    });

    // We want waypoints with different offsets depending on the scroll direction. 
    $('.js-waypoint-article').waypoint({
        handler: function(direction) {
            if (direction === 'down') {
                $('.anchornav--link').removeClass('anchornav--link__selected');
                $('#' + this.element.id + '_button').addClass('anchornav--link__selected');
            }
        },
        offset: stickyoffset + 1
    });

    $('.js-waypoint-article').waypoint({
        handler: function(direction) {
            if (direction === 'up') {
                $('.anchornav--link').removeClass('anchornav--link__selected');
                $('#' + this.element.id + '_button').addClass('anchornav--link__selected');
            }
        },
        offset: stickyoffset - 1
    });

    // Because the article that is last on the page never hits the top of the
    // viewport, we need to force the it into a selected state
    $('#post').waypoint({
      handler: function(direction) {
        $('.anchornav--link').removeClass('anchornav--link__selected');
        $('#' + this.element.id + '_button').addClass('anchornav--link__selected');
      },
      offset: function() {
        // Why 300? More or less arbitrary, adjust as needed
        return this.element.clientHeight + 300
      }
    });
}

Upvotes: 1

imakewebthings
imakewebthings

Reputation: 3398

From the Sticky Shortcut page you linked to:

When creating a new Sticky you can also pass along an options object. This options object can take all of the options of a normal Waypoint, as well as a few extras specific to the Sticky class.

Did you find that if you passed offset as an option in your Sticky initializer it had no effect?

Upvotes: 2

Related Questions