CODEWITHSUNDEEP
jqueryjquery-pluginsoffsetscrolltop
geraddavis
geraddavis

Reputation: 355

jQuery scrollTop needs offset to clear fixed header

I'm using this website tour plugin which works great except I need to add an offset for it to clear my site's fixed header when it scrolls back up the page. Currently it places the tooltip at the very top of the viewport, which, because of the fixed header, partially obscures the highlighted element. I've tried a few things including applying an offset the the 'easeInOutExpo' function, but I can't get it to work correctly. Code:

/*
     if the element is not in the viewport
     we scroll to it before displaying the tooltip
     */
    var w_t = $(window).scrollTop();
    var w_b = $(window).scrollTop() + $(window).height();

    //get the boundaries of the element + tooltip
    var b_t = parseFloat(properties.top, 10);

    if (e_t < b_t)
        b_t = e_t;

    var b_b = parseFloat(properties.top, 10) + $tooltip.height();
    if ((e_t + e_h) > b_b)
        b_b = e_t + e_h;


    if ((b_t < w_t || b_t > w_b) || (b_b < w_t || b_b > w_b)) {
        $('html, body').stop()

            .animate({scrollTop: b_t}, 500, 'easeInOutExpo', function () {
                //need to reset the timeout because of the animation delay
                if (autoplay) {
                    clearTimeout(showtime);
                    showtime = setTimeout(nextStep, step_config.time);
                }
                //show the new tooltip
                $tooltip.css(properties).show();
            });
    }
    else
    //show the new tooltip
        $tooltip.css(properties).show();

Upvotes: 0

Views: 503

Answers (1)

geraddavis
geraddavis

Reputation: 355

Fixed it. After much trial and error I found I could add and offset on the b_t variable. 

var b_t = parseFloat(properties.top, 10) - '136';

Upvotes: 0

Related Questions