This repository has been archived by the owner on Sep 11, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Possilbe to change sticky top position when viewport changes? #211
Comments
There are a few ways to accomplish this. For us, we use a css/sass workaround:
Basically, we're exploiting the :before pseudo-element to ensure that our stylesheet breakpoints are always retrievable by javascript by effectively modifying the DOM, regardless of how those breakpoints may change in our sass. You can do this with standard CSS as well, of course. Next in JS, we do something like:
|
Thanks for your solution. I will give this a try. I haven't used SASS yet so I will go about this using standard css. |
Another approach that works well with Bootstrap 3 breakpoints (you'd have to replicate the classes/breakpoints to work in a non-Bootstrap environment): Put this anywhere in your document: <span id="mq-detector">
<span class="visible-xs" data-id="0"></span>
<span class="visible-sm" data-id="1"></span>
<span class="visible-md" data-id="2"></span>
<span class="visible-lg" data-id="3"></span>
</span> Then this JS: $(function() {
// https://stackoverflow.com/a/28373319/922323
// https://github.com/garand/sticky/issues/211
// https://github.com/JoshBarr/on-media-query
var $sticky = $('.sticky');
var options = {
topSpacing: 10,
responsiveWidth: true
};
$sticky.sticky(options);
$('body').on('BREAKPOINT', function(event, size) {
if (size <= 1) {
$sticky.unstick();
} else {
$sticky.sticky(options);
}
});
});
//----------------------------------------------------------------------
// THIS SHOULD COME LAST!
//----------------------------------------------------------------------
$(function() {
var mqDetector = $('#mq-detector');
var mqSelectors = [
mqDetector.find('.visible-xs'),
mqDetector.find('.visible-sm'),
mqDetector.find('.visible-md'),
mqDetector.find('.visible-lg')
];
var checkForResize = function() {
for (var i = 0; i <= mqSelectors.length; i++) {
if (mqSelectors[i].is(':visible')) {
if (window.BREAKPOINT != i) {
window.BREAKPOINT = i;
console.log(mqSelectors[i].attr('class'));
$('body').trigger('BREAKPOINT', mqSelectors[i].data('id'));
}
break;
}
}
};
window.BREAKPOINT = undefined;
$(window).on('resize', checkForResize);
checkForResize();
}); Links: |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
I have 2 sticky items, the top navigation menu bar, and a module on the left side bar.
Everything works great expect when the top navigation menu bar gets changed to a slide out left menu for mobile devices with small viewports.
Is it possible to change the module to a new top position when the view port has changed? This way I am not left with a white space at the top.
Thanks for a great plugin.
The text was updated successfully, but these errors were encountered: