Sticky Top Bar
Mod Version: 1.00, by bjarne2
| vB Version: 4.2.1 | Rating:  (2 votes - 5.00 average) |
Installs: 14 |
| Released: 02 May 2013 | Last Update: Never | Downloads: 0 |
 Not Supported
|
||
I have used the idea and some code from XiTCLUB
This can work in a more simple way and act in the general navbar too.
Template Navbar
*************
as line number 2 paste
<div id="stickyBar">
additional.css
***********
Width is set to the width you have on the side or 100% (my page is width:1200px
Set the height of the Navbar incl submenu (my page Navbar is height:59px
It is important to add the correct px
Template Headinclude
******************
To get it to work without notch set height down to the navbar (my page is .top +130; in this file in headinclude)
If you use another jquery version is also okay.
It is important to add the correct px
If you use Google Translate disappear the top of the navbar!!
You can see it in action here, but only with this style
http://www.corvetteworld.dk/forums/forum.php?styleid=7
This can work in a more simple way and act in the general navbar too.
Template Navbar
*************
as line number 2 paste
<div id="stickyBar">
additional.css
***********
Code:
#stickyBar.stick {
position: fixed;
top: 0;
z-index: 10000;
width:1200px;
height:59px;
margin:0 auto;
background: #247FB2;
border-radius: 0 0 0.5em 0.5em;
display: block;
}
Set the height of the Navbar incl submenu (my page Navbar is height:59px
It is important to add the correct px
Template Headinclude
******************
Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.above_body').offset().top +130;
if (window_top > div_top) {
$('#stickyBar').addClass('stick');
} else {
$('#stickyBar').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
If you use another jquery version is also okay.
It is important to add the correct px
If you use Google Translate disappear the top of the navbar!!
You can see it in action here, but only with this style
http://www.corvetteworld.dk/forums/forum.php?styleid=7
Download
No files for download.