Loading...
 
(Cached)

Tiki project sites page header scrolling

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:

Copy to clipboard
{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}


The pixel distances can be adjusted as necessary.


Page last modified on Monday 04 of April, 2016 13:08:55 GMT-0000

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config