CODEWITHSUNDEEP
jquerycssfrontendstickyjquery-waypoints
David
David

Reputation: 1774

jQuery Waypoints plugin with sticky add-on not recalculating reference point when page height changes

I'm using the jQuery Waypoints plugin and sticky add-on to lock a form-submission section at the bottom of the window, until the section would naturally have been shown when scrolling to the bottom of the form.

For design/stylistic reasons, I need the sticky version to have a top border that spans the whole window, whereas, when the section sits in its natural position, the top border only spans its central column. As such, I'm using a "sticky-outer wrapper" and a "sticky-inner-wrapper" instead of the default "sticky-wrapper".

What I am experiencing is that if any sections of the form are collapsed, then the sticky version will not lock back into the form when scrolling past it, and if any new sections are shown, like a validation summary, then the sticky version will lock back in too early when scrolling down the page. It seems to be off by the number of pixels introduced.

This leads me to surmise that the Waypoints plugin is calculating, on page load, a fixed number of pixels as the reference point, so that if the height of the form changes, it ends up being off. This, in turn, could be a symptom of my code being incorrect in a way I don't expect, so here is the relevant code:

HTML:

<div class="col-xs-12 suppress-col-gutters sticky-outer-wrapper">
  <div class="col-xs-12 sticky-inner-wrapper">
    <div class="container">
      ... various elements ...
    </div>
  </div>
</div>

CSS:

.sticky-outer-wrapper {
  min-height: 160px;
}

.stuck .sticky-inner-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.2);
  background: #ffffff;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
}

JS:

var createStickyButtons = function() {
    if ($('body').hasClass('stuck')) {
        var waypoint = new Waypoint({
            element: $('.sticky-outer-wrapper'),
            handler: function (direction) {
                $('body').removeClass('stuck');
                if (direction === 'up') {
                    $('body').addClass('stuck');
                }
            },
            offset: 'bottom-in-view'
        });
    }
};

Upvotes: 3

Views: 410

Answers (1)

David
David

Reputation: 1774

One of the devs on my team realised that it would start working again when the window was resized, so the fix for now is to force a resize whenever a method is run that causes the form's content height to change.

There's probably a more targeted way of recalculating the waypoint, without forcing a full resize of the content, but this will do unless someone can provide a more precise event to utilise.

Upvotes: 0

Related Questions