Bug on Resize -> mis-calculated margin-bottom

[Joschka]

Hi Sönke,

there seems to be a bug regarding the calculation of the margin-bottom of is-absolute elements on resize. The margin-bottom get's quite big, eg. 171097px and causes the page to become really long (whitespace at the end of the page)

How to reproduce:

1. go to demo page using Chrome: https://rawgit.com/soenkekluth/react-sticky-state/master/examples/index.html
2. scroll down until the first red "Fixed to viewport top A." element (#top-a) becomes "is-absolute".
3. Inspect that "is-absolute" element and watch the margin-bottom inline style
4. Resize the window
5. Observe that the margin-bottom value increases with every resize event

• Scrolling up again fixes the calculated value (the calculation onScroll seems to be ok)
• the value is increased by a fixed value on every resize event

Would be great, if you can have a look. When I find time, I will do also.

[Sönke Kluth]

ok i will look into it. thx

[Henrik Raitasola]

Looks like only React version of sticky-state library has this "resize bug". I did workaround by using non-React version of sticky-state. My component looks like this and not it works great :)

import React from "react";
import StickyState from "sticky-state";

const StickyExampleComponent = React.createClass({
  componentDidMount() {
    new StickyState(document.querySelectorAll(".element-i-want-to-be-sticky"));
  },

  render() {
    return (
      <div className="element-i-want-to-be-sticky">
        Look I am sticky!
      </div>
    );
  }
});

export default StickyExampleComponent;

[Sönke Kluth]

@henrikra @joschka yes you are right. margin-top and bottom support is already implemented in the newsest version of sticky-state https://github.com/soenkekluth/sticky-state
example: https://rawgit.com/soenkekluth/sticky-state/master/examples/index.html

I will soon port it to the react version!

[Sönke Kluth]

should be fixed in v2.0.0 https://rawgit.com/soenkekluth/react-sticky-state/master/examples/index.html

[Sönke Kluth]

@joschka @henrikra does it work now? close?

[Henrik Raitasola]

For me resizing works now on react version on sticky-state :)

[Sönke Kluth]

@henrikra its hard to keep both libs up to date. I will make the core calculations an own module.

[Henrik Raitasola]

Very good idea!

[Sönke Kluth]

everything should be fine with the new versions. (2.1.4)