Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

.fixedsticky-on element activates way above parent element #58

Open
Inframatic opened this issue Sep 18, 2015 · 1 comment
Open

.fixedsticky-on element activates way above parent element #58

Inframatic opened this issue Sep 18, 2015 · 1 comment

Comments

@Inframatic
Copy link

.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

@smisch
Copy link

smisch commented Oct 29, 2015

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants