Joomla Templates Club 406,261 posts

[orsomannaro Friend orsomannaroJoin date: January 2008Posts: 241Downloads:32Uploads:18 Thanks: 1 Thanked: 3 times in 1 posts]

#892165

I don’t like the fixed header and menu neither the scroll animation.

To have relative header and menu position I put this rules in custom.css :

.t3-wrapper {
    padding-top: 10px;
}
.t3-header{
    position: relative !important;
}
.t3-mainnav {
    position: relative !important;
    padding-top: 0;
}

But I still can see the animation effect when I scroll the page.

How can I disable this animation at all?

Thank you.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#892694

Hi,

You can try with my tweak below to achieve that.

Open templates/ja_magz_ii/js/script.js file, find and remove this script

// Header Scroll
// -----------------
(function($) {

    var scrollLastPos = 0,
        scrollDir = 0, // -1: up, 1: down
        scrollTimeout = 0;
    $(window).on ('scroll', function (e) {
        var st = $(this).scrollTop();
        //Determines up-or-down scrolling
        if (st < 80) {
            if (scrollDir != 0) {
                scrollDir = 0;
                scrollToggle();
            }
        } else if (st > scrollLastPos){
            //Replace this with your function call for downward-scrolling
            if (scrollDir != 1) {
                scrollDir = 1;
                scrollToggle();
            }
        } else if (st < scrollLastPos){
            //Replace this with your function call for upward-scrolling
            if (scrollDir != -1) {
                scrollDir = -1;
                scrollToggle();
            }
        }
        //Updates scroll position
        scrollLastPos = st;
    });

    $('.ja-header').on ('hover', function () {
        $('html').removeClass ('scrollDown scrollUp').addClass ('hover');
        scrollDir = 0;
    })

    scrollToggle = function () {
        $('html').removeClass ('hover');
        if (scrollDir == 1) {
            $('html').addClass ('scrollDown').removeClass ('scrollUp');
            $("#t3-header").css('top','0px');
        } else if (scrollDir == -1) {
            $('html').addClass ('scrollUp').removeClass ('scrollDown');
            $("#t3-header").css('top','0px');
        } else {
            $('html').removeClass ('scrollUp scrollDown');
            $("#t3-header").css('top','51px');
        }
        $('html').addClass ('animating');
        setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
    }

})(jQuery);

Hope it helps

Regards

[orsomannaro Friend orsomannaroJoin date: January 2008Posts: 241Downloads:32Uploads:18 Thanks: 1 Thanked: 3 times in 1 posts]

#892865

It works!

Out of curiosity: is it possible to solve the problem with custom.css?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#893211

Yes, you can redefine scrollDown, scrollUp and animating class from custom.css file but the best way, you need to change directly from templates/ja_magz_ii/js/script.js file as my solution.

[orsomannaro Friend orsomannaroJoin date: January 2008Posts: 241Downloads:32Uploads:18 Thanks: 1 Thanked: 3 times in 1 posts]

#893370

Thank you again

[bohemiadesign Friend bohemiadesignJoin date: March 2010Posts: 194Downloads:26Uploads:19 Thanks: 16 Thanked: 1 times in 1 posts]

#990006

Thank you – this is what I was after as well.
However – if the template has an update in the future it migh overwrite the script.js file.
Is it possible to ‘copy’ the script.js file to my theme folder – tomake sure the chnages are not overwritten?
Thanks
J

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#990154

@bohemiadesign: In this case, you need to make a backup all files have been changed on your site and process upgrading on your site.

[Author]

Posts