vb.org Archive

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)

bjarne2 05-01-2013 10:00 PM
Sticky Top Bar
 
1 Attachment(s)
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

New Joe 05-02-2013 11:06 AM
Is this the same as this:
https://vborg.vbsupport.ru/showthread.php?t=297532

bjarne2 05-02-2013 12:18 PM
No - here is used standard navbar and not a new!

GamerPerfection 05-04-2013 08:03 AM
It works, awesome.
http://www.gamerperfection.com/forum.php

GamerPerfection 05-04-2013 11:23 AM
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 05-04-2013 05:07 PM
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 05-04-2013 09:01 PM
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 05-05-2013 06:30 AM
In additional.css

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

GamerPerfection 05-05-2013 08:34 AM
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 05-06-2013 05:33 AM
Quote:
Originally Posted by GamerPerfection (Post 2420028)
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.

GamerPerfection 05-06-2013 08:08 AM
Well instead of having it fixed is it not possible to have it so it moves sideways with the site if necessary?

FakeMessiah666 05-06-2013 04:57 PM
Very awesome template mod. Thanks for sharing. :)

K4GAP 05-06-2013 05:41 PM
Quote:
Originally Posted by GamerPerfection (Post 2420188)
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 05-06-2013 05:45 PM
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 04-23-2014 12:50 PM
Author forget to close div, before:
HTML Code:
</div><!-- closing div for above_body -->
So... this must look like this: In template navbar, found string:
HTML Code:
</div><!-- closing div for above_body -->
And add above "close div tag"
HTML Code:
</div>
-----------------------------------------------------------------------------------------------
HTML Code:
</div>
</div><!-- closing div for above_body -->

DemOnstar 04-28-2014 11:29 AM
Not sure what you mean here..

Code:
</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 04-28-2014 01:55 PM
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 04-28-2014 02:10 PM
Look to color of footer... is same as color of navbar without closed div. In some chances is not a problem.

DemOnstar 04-28-2014 02:19 PM
I am seeing nothing different.
Perhaps in your style there may well be something different?

Wedframe 04-28-2014 06:02 PM
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.

DemOnstar 04-29-2014 01:39 AM
I see. I had the same issue with the subnav being dark blue.
I just changed the background colour in 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;
}

Wedframe 04-29-2014 08:26 PM
DemOnstar, may be I`m wrong... But my point in this:
Then you add to your postbit template:
Code:
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:
Code:
<div id="someID">content of this div</div>
Thats it.

DemOnstar 04-30-2014 02:23 AM
I do not think you are wrong squire, in fact you are correct.

Code:
<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 07-18-2014 12:15 PM
works great, thank you :)

edgeless 02-21-2015 01:41 PM
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 02-22-2015 12:58 PM
installed...I added the option for members to choose whether to stick/unstick

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


All times are GMT. The time now is 05:49 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.02174 seconds
  • Memory Usage 1,799KB
  • 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
  • (8)bbcode_code_printable
  • (4)bbcode_html_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (26)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
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete