Joomla Templates Club 406,261 posts

[lmgsupport Friend lmgsupportJoin date: September 2014Posts: 10Downloads:64Uploads:0 Thanks: 3]

#198769

Evening ladies and gents. I need a bit of help.

What i would like to accomplish is to make the menu bar for a Ja Purity template fade and change colors when scrolling similar to what the nav menu in Ja Sugite does.

I know its JS and css doing this, but if someone could point out some specific areas/file controlling these action i might be able to figure it out or at least get an idea of what needs to be done if i have to contract it out.

Thanks in advance.

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

#538816

This requires pretty heavy customization. You can dig into the following files in JA Sugite template:

+ The templates/ja_sugite/js/script.js file:


(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 < 1) {
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;
});

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

scrollToggle = function () {
$('html').removeClass ('hover');
if (scrollDir == 1) {
$('html').addClass ('scrollDown').removeClass ('scrollUp');
} else if (scrollDir == -1) {
$('html').addClass ('scrollUp').removeClass ('scrollDown');
} else {
$('html').removeClass ('scrollUp scrollDown');
}
$('html').addClass ('animating');
setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
}

})(jQuery);


+ The templates/ja_sugite/css/template.css file:


.t3-header {
top: 0;
width: 100%;
z-index: 100;
background: #292929;
}
.animating .t3-header {
-webkit-transition: 300ms;
transition: 300ms;
}
.has-slideshow .t3-header {
position: static;
} @media (min-width: 992px) {
.has-slideshow .t3-header {
background: none;
position: fixed;
}
}
.scrollDown .t3-header,
.scrollUp .t3-header {
top: 0;
background: #292929 !important;
position: static;
} @media (min-width: 992px) {
.scrollDown .t3-header,
.scrollUp .t3-header {
position: fixed;
}
}
.scrollDown .t3-header {
top: -300px;
}
.off-canvas-open .t3-header {
background: #292929;
}


You can give it a try to apply to JA Purity template.

1 user says Thank You to Ninja Lead for this useful post

1. dieudonne

[Author]

Posts