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

[DemOnstar]

I see. I had the same issue with the subnav being dark blue.
I just changed the background colour in 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;
}

[Wedframe]

DemOnstar, may be I`m wrong... But my point in this:
Then you add to your postbit template:

as line number 2 paste
<div id="stickyBar">

you add and open one more div. But if div opened, this div must be closed somewhere below the content.
Normally div look like this:

<div id="someID">content of this div</div>

Thats it.

[DemOnstar]

I do not think you are wrong squire, in fact you are correct.

<div>Now I believe the subject is closed.</div>

But as I say, it is not affecting me as the thing works just fine.
That is of course except for https://vborg.vbsupport.ru/showpost....8&postcount=18 which is my main issue.

Thank you.

[ArcadeSyndicate]

works great, thank you

[edgeless]

I posted the other day about this modification. I've deleted that post and will attempt to clarify a bit better in this one.

This mod certainly works. But it seems to have some inconsistencies from forum site to forum site. On my forum site the sticky navbar won't correctly re-size with window dimension changes on any of the browsers that I've tested. That is, when the sticky anchor point is set correctly for a maximized window, although it continues to work fine while the window remains maximized, both the sticky anchor point and the width setting for the navbar fail to maintain proper positioning when the browser window is reduced to a smaller size. However, my observations suggests that this problem may be peculiar to my forum site alone... as I've noticed that those position/dimensional properties seem to track reasonably well on certain other vB sites where this mod has been added. There does seem to be a problem with it on the site that bjarne2 posted a link for, though. That is, on Google Chrome the entire navbar scrolls up and stops at its correct anchor point (as it should) and its tabs align properly at the top of the browser window and are accessible (as they should be). But when I view the same page with Firefox, the tabs scroll off screen as if the anchor point has been set much higher. Only the navbar links below remain visible.

And another important concern seems to exist on every forum site using this mod that I've checked. That is, when the navbar correctly sticks where it should, it tends to cover up the top portion of posts that have been called by their respective anchor point URL's. This is the same issue that DemOnstar has pointed out. Simply stated, you can't see the text near the tops of those anchor-positioned posts because the sticky navbar is in the way. A solution may be that some padding can be added to showthread (or somehow) to push the content of those posts down a bit.

Aside from the issues I've mentioned, this would be a great mod that I would otherwise consider using.

[OUTL4W]

installed...I added the option for members to choose whether to stick/unstick

<!-- sticky navbar -->
<if condition="$bbuserinfo['fieldX'] == 'Yes'">
<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>
<!-- end sticky navbar -->