Mini Mods - Sticky Top Bar

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

[GamerPerfection]

Well instead of having it fixed is it not possible to have it so it moves sideways with the site if necessary?

[FakeMessiah666]

Very awesome template mod. Thanks for sharing.

[K4GAP]

Originally Posted by GamerPerfection

Well instead of having it fixed is it not possible to have it so it moves sideways with the site if necessary?

If one of your priorities with your site is everything has to be able to move sideways, maybe you should be more concerned with proper site functionality.

[GamerPerfection]

What is the point in this mod then if the right end of the sticky bar is inaccessible and if it wraps to the second line then it overlays the information underneath the navigation therefore making that bit unuseable.

[Wedframe]

Author forget to close div, before:

</div><!-- closing div for above_body -->

So... this must look like this: In template navbar, found string:

</div><!-- closing div for above_body -->

And add above "close div tag"

</div>

-----------------------------------------------------------------------------------------------

</div>
</div><!-- closing div for above_body -->

[DemOnstar]

Not sure what you mean here..

</div>
</div><!-- closing div for above_body -->

Mine already looks like that.

I downloaded, added the code to the necessary areas, did some tweaking and all seems well.

I tried to do this myself a while back, didn't succeed.
So now it does the job, well done bjarne2 sir.

Thanks for your effort..

[DemOnstar]

I did however find a minor issue.

When a user clicks the arrow icon in a quoted message, the page opens but the top of the message is clipped. i.e. obscured by the navbar.

Otherwise this would work perfectly.

[Wedframe]

Look to color of footer... is same as color of navbar without closed div. In some chances is not a problem.

[DemOnstar]

I am seeing nothing different.
Perhaps in your style there may well be something different?

[Wedframe]

Then I install this mod, i was have default style of vB4.2.2
And without closed div, I was haved color of foot same as stiky navbar(dark-blue). When I add </div>, color of foot staying with default color.