fixed-sticky
fixed-sticky copied to clipboard
.fixedsticky-on element activates way above parent element
.fixedsticky-on is being called up to 700px above the parent container of .fixedsticky-on. I've tinkered with setting a fixed height and width on the parent container and .fixedsticky element. If the width of the browser is changed, fixedsticky-on is called at different times, all still way above the target container
Check out the problem here: http://www.meventi.de/event-6634-17727-Ballonfahrt-Aachen.html. Make sure your browser is small tablet size or mobile. fixed-sticky is deactivated in larger views.
before
and here's where everything goes crazy
Note: This problem does not happen when 'position:sticky' is working.
@zachleat @jefflembeck @jonykrause @wshaver and anyone else
I found that this issue happened to me when I resized the window after initializing fixedsticky. If the window resizes, the plugin must re-calculate the offsets for each element. It either doesn't do this, or does it incorrectly.
Edit: Short answer: The offset isn't recalculated, ever. You can do this from the outside:
$(window).on("resize", function (){
$(".fixedsticky").removeData("fixedStickyOffset");
});
Edit: I found it's better to repair the elements offset instead of just removing it. Otherwise while resizing the window you might get jumps.
Edit2: Adjusting the height of the dummy is also necessary.
// with throttle
$(window).on("resize", $.throttle(250, function (event){
$(".fixedsticky").each(function (){
var $obj = $(this),
$parent = $obj.parent();
// adjust offset and width
$obj.data("fixedStickyOffset", $parent.offset().top ).width( $parent.width() );
// adjust height of the dummy
$obj.next(".fixedsticky-dummy").height( $obj.height() );
});
}));
// without throttle
$(window).on("resize", function (event){
$(".fixedsticky").each(function (){
var $obj = $(this),
$parent = $obj.parent();
// adjust offset and width
$obj.data("fixedStickyOffset", $parent.offset().top ).width( $parent.width() );
// adjust height of the dummy
$obj.next(".fixedsticky-dummy").height( $obj.height() );
});
});
Obviously it would be better to implement this feature into the plugin. ;-)