Loading...
 
Skip to main content

History: Tiki project sites page header scrolling

Source of version: 2 (current)

Copy to clipboard
            {syntax type="markdown"  editor="wysiwyg"} To get the behavior at the Tiki project sites in which the Top module zone scrolls upward out of site and the Topbar module zone sticks to the browser top edge, a custom module containing JavaScript is put in the Bottom module zone.

The custom module is called "Hide Fixed Top Nav Bar on Scroll (0.2)" (this can be any name, of course), and the module is given the 'nobox="y"' parameter. Here is the content/data of that custom module:

{CODE()}
{jq}{literal}
$(document).ready(function () {
var resetCSS = {
transition: 'all .5s ease 0s',
top: '',
height: '',
minHeight: '',
opacity: '',
overflow: ''
};
$(window).on("scroll", function () {
if ($(window).scrollTop() > 10) {
$('.navbar-fixed-top').css({
transition: 'all .75s ease 0s',
top: '-20px',
height: '25px',
minHeight: '5px',
opacity: '.75',
overflow: 'hidden'
});
$('html:not(#page_1) .topbar_wrapper').css({
position: 'fixed',
top: '7px',
width: '100%',
left: 0,
'z-index': 3
});
$("html:not(#page_1) .topbar").css({
"box-shadow": "0 5px 10px 0px rgba(0,0,0,.25)"
});
} else {
$('.navbar-fixed-top').css(resetCSS);
$(".topbar_wrapper").removeAttr('style');
$(".topbar").removeAttr('style');
}
});
$('.navbar-fixed-top').on('mouseover', function () {
$(this).css(resetCSS);
$('html:not(#page_1) .topbar_wrapper').css({
top: '48px'
});
});
});
{/literal}{/jq}

{CODE}

The pixel distances can be adjusted as necessary.