vb.org Archive - Mini Mods

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Mini Mods - Sticky Top Bar (https://vborg.vbsupport.ru/showthread.php?t=297763)

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

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;

}

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

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>

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

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

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?

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

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.

In additional.css

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

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.

Quote:

Originally Posted by GamerPerfection (Post 2420028)

Try using percentage in place of the assigned width.

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01036 seconds Memory Usage 1,739KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (2)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: