Navigation Bar Scroll then Sticky

[Mr. Tom]

Forum URL: themeparkfunv2.boards.net

Hey,

I already have my navigation bar sticky'd to the top of my page, but is it possible to have it scroll as normal, and then sticky as soon as it's about to go off the screen?

This is what I mean:





Or go to http://www.towersstreet.com/talk/ to see it live.

Thanks in advance,
Mr. Tom

[Tumbleweed]

Mar 26, 2014 13:26:03 GMT -8 Mr. Tom said:

Forum URL: themeparkfunv2.boards.net

Hey,

I already have my navigation bar sticky'd to the top of my page, but is it possible to have it scroll as normal, and then sticky as soon as it's about to go off the screen?

This is what I mean:





Or go to http://www.towersstreet.com/talk/ to see it live.

Thanks in advance,
Mr. Tom

Looks like you just put in a fixed position at the top, but oddly, I was just playing with something like this here:

putteraround4.proboards.com/

Haven't got it exactly how I want it and it has some bugs I need to fix, but once I get it fixed, if you want the template, I can post it. But actually, to be honest, I prefer the way you have yours now.

[Forever Sunshine]

When you figure this one out, Tumbleweed, tag me, please!  I kind of like the way it looks on your test site. 

[Mr. Tom]

Sorry for bumping the thread, but Tumbleweed, would you be able to release the code for this, as I'd really like to use it.

Tom

[Tumbleweed]

Forever Sunshine, I so sorry, I totally spaced this off.


Mr. Tom, I'll have this for you by tomorrow, late. It's been a while since I was messing with this, so I need to go back in and try to remember what all I changed.

[Mr. Tom]

May 26, 2014 22:08:59 GMT -8 Tumbleweed said:

Forever Sunshine, I so sorry, I totally spaced this off.


Mr. Tom, I'll have this for you by tomorrow, late. It's been a while since I was messing with this, so I need to go back in and try to remember what all I changed.

Ok, thanks! If you could do it, I'd be over the moon!

[Forever Sunshine]

May 26, 2014 22:08:59 GMT -8 Tumbleweed said:

Forever Sunshine, I so sorry, I totally spaced this off.


Mr. Tom, I'll have this for you by tomorrow, late. It's been a while since I was messing with this, so I need to go back in and try to remember what all I changed.

Tumbleweed! It's no big deal. I'd forgotten about it as well. So, no rush; whenever you're in the mood to putz around.

[♥ ℒʊ√ ♥]

Tumbleweed, I'd be interested in something like this, too. No one has been able to get a functioning nav tree in my footer. This would serve that purpose if it could be done with the Nav Tree? Is that possible? If so, and you'd like me to start a thread for that, I will. 

[Tumbleweed]

♥ ℒʊ√ ♥, I'll see what I can do with the nav tree but why don't you start a new thread in case we need more conversations regarding the menu bar. (Don't want anyone getting confused.)


Mr. Tom and Forever Sunshine (If you are still interested) here it is:


The first thing you need to do is add the red to your wrapper template:
Home> Themes> Layout Templates>Forum Wrapper

First this part which you can start looking around line 14:

<div id="wrapper">
<header>
<div class="spec_scroll_container">
<div class="test_content">
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
</div>
</div>
<div class="scroller_anchor"></div>
<div class="scroller">
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>


Then scroll down looking for  < /header> in the template code and add the red closing div right above it.


</p>
</div>
</div>
</header>
$[participated_threads_link]


Now for the css and this can go at the bottom of your style sheet:  Home> Themes> Advanced Styles & CSS> Style Sheet>

/*scroll and stop menu bar*/
.spec_scroll_container{margin:0 auto;width:900px;}
.test_content{margin:10px 0;}
.scroller_anchor{height:20px; margin:0; padding:0;
}
.scroller{
margin:0 0 10px;
z-index:10000;
height:50px;
width:900px;
margin-top:6px;
}

And then the javascript which I just put at the bottom of my wrapper template:

SPOILER: Click to show

<script>
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;
if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
{
$('.scroller').css({
'position': 'fixed',
'top': '0px'
});
$('.scroller_anchor').css('height', '20px');
}
else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
{
$('.scroller_anchor').css('height', '0px');
$('.scroller').css({
'position': 'relative'
});
}
});
</script>

---

If you are weary of adding codes like that and made no changes to the template you want to keep, here is the complete wrapper template with the additional codes already added. All you'd need to do then is just add the css to your stylesheet.

SPOILER: Click to show

<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div class="spec_scroll_container">
<div class="test_content">
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
</div>
</div>
<div class="scroller_anchor"></div>
<div class="scroller">
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</div>
</header>
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>
$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>

<script>
$(window).scroll(function(e) {
var scroller_anchor = $(".scroller_anchor").offset().top;

if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
{
$('.scroller').css({
'position': 'fixed',
'top': '0px'
});
$('.scroller_anchor').css('height', '20px');
}
else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
{

$('.scroller_anchor').css('height', '0px');

$('.scroller').css({
'position': 'relative'

});
}
});

</script>

Sorry, the above didn't seem to keep the tabbing I meticulously made sure was correct. Grrr.

[♥ ℒʊ√ ♥]

Will do, Tumbleweed. Thank you.

[Mr. Tom]

Tumbleweed, I really love this code, but on my test forum, the navbar seems to jump to the left when it was originally centred, and also, the transition from not sticky to sticky is really unsmooth. The forum does a massive jump. Here's my test forum's link: venturiadventure.boards.net

Edit: And there is also a small gap between the navbar and the top of the page. Can this be fixed?

[Tumbleweed]

You are using a Safari browser, correct? I only have IE, FF and Chrome so only tested in those browsers.  I do, however, see a small jump on your site but not a big jump so not sure if this will help or not but try adjusting the height (in bold below) to a smaller number:


.container{margin:0 auto;width:900px;}
.test_content{margin:10px 0;}
.scroller_anchor{height:20px; margin:0; padding:0;
}
.scroller{
margin:0 0 10px;
z-index:10000;
height:50px;
width:900px;
margin-top:6px;
}


The gap on tops was to accommodate the notification bubble, so it doesn't get cut off but if you don't care about that then remove the red above. 

I did some testing and it appears the change in width is due to the 70% width you have set in your Visual Editor. I'm afraid I don't know a way around this except to make sure the width in the code matches what is in your Visual Editor or visa versa and it would have to be in pixels. (Setting it to the same percent as in your visual editor, does not work.

During this time of trying to solve your issues, I discovered one of my own. You know how when you are in a thread reading posts you have the control bar do the same thing as the menu. Well, unfortunately, they are both set to stop and be in the fixed position and the control bar it is getting covered by the menu so I need to find a way to have the control bar stop like 20 or so pixels less than what it is currently set at. (I'll try to work something out later on tonight.)

Since I don't have Safari I'm not sure what I can do to solve your giant jumping issue, if adjusting the height, doesn't fix it. Hard to fix something if you don't have the problem to begin with.

Edit: A alternative to having the gap for the notification bubble would be to make your menu bar have just a little more padding on top (taller in height) so the notification bubble is completely in the menu bar. If you want to try this option, you can add this to the bottom of your style sheet:

#navigation-menu{padding-top:8px;
}

And then just removed that above red line totally. All of the css is there for you to adjust to suit your site. Play around with it and see what does what.

Mr. Tom, are you getting a big transition jump on my test site?

putteraround4.proboards.com/

[Mr. Tom]

Thank you EVER SO MUCH! You are an absolute legend! I was just using the forum I linked to as a test, and the forum I am actually using the sticky navbar on is shadowsofmine.proboards.com

Now, sorry if I'm being picky, but is there a way to get ride of this gap above the main header, which seemed to appear when I added this code?

Thanks again,
Tom

Edit: Sorry, but also, is there a way to make the 'participated' box float on top of the navbar, as the navbar is currently on top, and is annoying some of the forum members.

prntscr.com/3ngwm3

[Tumbleweed]

Mr. Tom,

I appreciate the screenshots but is it possible to open your site to guests as I"m having a hard time understanding what is going on by the screenshots?

[Mr. Tom]

I have disabled guests must login, so once you have had a good look Tumbleweed, can you send me a PM/post on here so that I can re-enable it?

Tom