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

[New Joe]

Is this the same as this:
https://vborg.vbsupport.ru/showthread.php?t=297532

[bjarne2]

No - here is used standard navbar and not a new!

[GamerPerfection]

It works, awesome.
http://www.gamerperfection.com/forum.php

[GamerPerfection]

Problem - it does not scroll sideways?

i.e. if the browser window is smaller it does not scroll with the page if you move the horizonal bar?

[bjarne2]

If you put 171px or so instead of 190px (Headinclude) and your background image in additional.css as the background instead of the dark color it will work better.
Your page will be no less if the browser window is smaller nor!!!

[GamerPerfection]

I'm not sure you understood what I was saying.

If I reduce the width of my browser window so it's less than 1260px (which is the width of the site), then the horizontal scroll bar appears. When I move the horizontal scroll bar the whole site moves with the exception of the sticky navbar.

This is also an issue on smart phones if you view the site and zoom in, then when you move the page horizontally everything moves except the sticky navbar.

So if the window is smaller in width than the navbar when it becomes a sticky navbar you can't see the end of it and therefore can't see the buttons.

[bjarne2]

In additional.css

width:100%;
max-width:1260px;

[GamerPerfection]

No, that's no good. What that does is it will wrap the navbar so if the window width is reduced anything on the right side will drop underneath, which is fine, but the menu items that drop underneath can't be clicked.

Try it out on my site yourself: http://www.gamerperfection.com

Try it full window, then reduce the window so that the horizontal bar appears and you can see what I mean.

I assume the bar doesn't move with the horizontal scroll because the bar is in a fixed position.

[K4GAP]

Originally Posted by GamerPerfection

No, that's no good. What that does is it will wrap the navbar so if the window width is reduced anything on the right side will drop underneath, which is fine, but the menu items that drop underneath can't be clicked.

Try it out on my site yourself: http://www.gamerperfection.com

Try it full window, then reduce the window so that the horizontal bar appears and you can see what I mean.

I assume the bar doesn't move with the horizontal scroll because the bar is in a fixed position.

Try using percentage in place of the assigned width.