Problem with fixed selectors

[alvarotrigo]

If I have a very large page (which enables me to scroll) and i have a fixed element at the bottom of the page, with something like:

position:fixed;
bottom:0px;
width:100%;
height:40px;

If i want to use the plugin with any element inside that fixed element, it will fail. The plugin tries to scroll down to find it and ends up pointing to the wrong place.

[marcobarbosa]

I have the same problem.

Could we check somewhere here: var currentTooltipPosition = this._introItems[this._currentStep].position;

That the element has "fixed" position and apply position "fixed" instead of "absolute" ?

@usablica Is this the way to go? I'm willing to patch it and issue a pull request if that is the case. What do you think?

@afshinm ping!

[mamezito-zz]

same problem here plz check quick example - http://jsfiddle.net/mamezito/gcKXf/ first tooltip overlays the button , https://github.com/usablica/intro.js/pull/240 this solution breaks the thing, cause scrolling leads to moving the element, which must be sticked in some place

also try second tooltip - the position of highlight area is wrong, and its moving when scrolling, while the element sticks in its place

[netcult]

Same problem here! I have a fixed header..

[raduluchian]

I also have a fixed navbar and have no such problem, on the other hand I have this problem with a fixed button:

.btn {
    position: fixed:
    bottom: 0;
    right: 0;
}

The problem is that the referenceLayer is always offset by minus some pixels to the top.

[afarineshfar]

I have the same problem. I have to change position temporary to absolute and after onexit event, change it again. Maybe sometime this method help you, especially when element fixed to top of page.

function showIntro(){
    $("footer.fixed-footer-box").css("position", "absolute");

    var intro = introJs().setOptions({
        'nextLabel': 'Next Step',
        'prevLabel': 'Prev Step', 
        'skipLabel': 'Exit', 
        'doneLabel': 'Finish' 
    }).start();

    intro.onexit( function(){
        $("footer.fixed-footer-box").css("position", "fixed");
    });
}

[bozdoz]

duplicate of #109