Hi Alain,
You can try this way:
1 - Use JS to add classes: scrollUp, scrollDown to page
2 - Add custom CSS style for above classes.
1 - Open the file: /templates/ja_landscape/js/template.js
And add this script:
(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;
});
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);
2 - Add this custom CSS:
.scrollUp .t4-mainnav, .scrollDown .t4-mainnav {
position: fixed;
width: 100%;
z-index: 999;
top: 0;
}
.scrollDown .t4-mainnav {
top: -300px;
}
My suggestion above is applied for the main menu on demo site only, depend on your site, you can customize above style to suit your need.
Regards