fixed-sticky icon indicating copy to clipboard operation
fixed-sticky copied to clipboard

.fixedsticky-on element activates way above parent element

Open Inframatic opened this issue 9 years ago • 1 comments

.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 screenshot_2015-09-18_12_25_41

and here's where everything goes crazy screenshot_2015-09-18_12_25_48

Note: This problem does not happen when 'position:sticky' is working.

@zachleat @jefflembeck @jonykrause @wshaver and anyone else

Inframatic avatar Sep 18 '15 10:09 Inframatic

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. ;-)

smisch avatar Oct 29 '15 14:10 smisch