Fixed Position problem

[nicoworq]

Hi ! I'm having problems when i try to use an fixed top bar, and animating any of the elements of the bar.

I have to scroll to top to start the animation.

if i'm in the middle of the page, i have to go to top to start the animation.

Thanks !

Great plugin !

[mattdelacdev]

Are you still having this issue? Do you mind demonstrating the problem with an example? Thanks

[codeandgraphics]

I'm having same trouble, when bootstrap's fixed top bar elements has wow-class, and i'm reload (F5) in the middle of the page, this elements doesn't animating. Example: http://code.and.graphics/lab/m-avtomatika/

[malykh]

Same problem here. Can anyone respond to that issue? Thanks

[jrmlstf]

Same problem too.

I wrote a quick fix but it isn't tested at all. When each box is checked if it isVisible, I call a isPositionFixed function that will check if the box has at least an ancestor which is position fixed. If yes, then I assume that the element is visible so I return true.

Here is the code :

    WOW.prototype.isPositionFixed = function(element) {
      var position;

      while (element.parentNode && element.parentNode.localName !== 'body' && position !== 'fixed') {
        position = getComputedStyle(element).position;
        element = element.parentNode;
      }

      position = getComputedStyle(element).position;

      return position === 'fixed' ? true : false;
    };

    WOW.prototype.isVisible = function(box) {
      var bottom, offset, top, viewBottom, viewTop;

      if (this.isPositionFixed(box)) {
        return true;
      }

      ...
    };

[hugohcn]

I have the same problem in my website :(

Has anyone solved the problem?

[hugohcn]

If you guys are using WOW + Animate.css, please see the link below:

https://github.com/daneden/animate.css/issues/274

[patrickng]

jrmlstf's solution worked for me with a tweak:

        WOW.prototype.isPositionFixed = function(element) {
            var position;

            position = getComputedStyle(element).position;

            while (element.parentNode && element.parentNode.localName !== 'body' && position !== 'fixed') {
                position = getComputedStyle(element).position;
                if (position === 'fixed') { break; }
                element = element.parentNode;
            }

            return position === 'fixed' ? true : false;
        };

[sonans202]

thank you @patrickng & @jrmlstf for the solutions! Its worked for me perfectly. Arigatou! For those who still cant get the code to work. Try replacing the e.prototype.isVisible function inside the wow.min.js with this:

e.prototype.isPositionFixed = function(element) { var position; position = getComputedStyle(element).position; while (element.parentNode && element.parentNode.localName !== 'body' && position !== 'fixed') { position = getComputedStyle(element).position; if (position === 'fixed') { break; } element = element.parentNode; } return position === 'fixed' ? true : false; }, e.prototype.isVisible = function (a) { if (this.isPositionFixed(a)) { return true; } var b, c, d, e, f; return c = a.getAttribute("data-wow-offset") || this.config.offset, f = window.pageYOffset, e = f + Math.min(this.element.clientHeight, this.util().innerHeight()) - c, d = this.offsetTop(a), b = d + a.clientHeight, e >= d && b >= f }

[lerouxm]

Another solution for those of you using wow.js + animate.css is to replace the "wow" class on your fixed element by "animated" class which will produce the same animation without waiting for the element to become visible in the viewport.

<div class="fixed wow slideInLeft"> becomes <div class="fixed animated slideInLeft">

[thexmanxyz]

I found a fix for the issue which was suggested in an AOS issue here. Simply add overflow-x: hidden; on your body. e.g.

body { overflow-x: hidden; }

or on the container holding your animation e.g.

section { overflow-x: hidden; }