• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

Sticky Top Bar vbb 4.2.1

Admin

Well-Known Member
Staff member
Administrator
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
***********
#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;
}

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
******************
<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>

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
 

Facebook Comments

New posts New threads New resources

Back
Top