d-oliveros/ngSticky

Sticky element width doesn't update, use max-width instead

nedkelly opened this issue · 2 comments

When the sticky element sticks the current width is applied to the style attribute. When resizing the window this size cannot update because it will always be equal to the initial size: initialCSS.width=width is the same as 263=263 because you've explicitly declared the width - then retrieved the width.

To fix this use width: 100%; max-width: XXpx; instead, this way the element can properly resize.

element.style {
    z-index: 10;
    width: 100%;
    max-width: 233px;
    position: fixed;
    top: 10px;
    margin-top: 0px;
}

Cheers.

axar commented

Above didn't work for me; but below did. I set the style.width on element to 100%

<div sticky style="width:100%"></div>

Then I replaced the

$elem[0].offsetWidth

to

($elem[0].style && $elem[0].style.width) || $elem[0].offsetWidth

I can create a pull request if this works for other people.

We had the opposite problem. A sticky div with max-width set. ng-Sticky modified the css with the calculated width, if the window resized while in "sticked mode", then going back to non-sticky did not update the correct component width.

@axar 's patch seems to solve it.