Streaming live at 10am (PST)

Tutorial to show how to do a scroll nav for multipage site


#1

Hi,

I'm looking for a tutorial or free template that I can reference on how to do fade in fixed nav bar on scroll for a multipage site.

The tutorial you have, from what I've seen, for a fad in nav only works for one-page websites that use a specific element on the page activate scrolling...the website needs to activate by the fact one is simply scrolling.

This is an example I've seen in regard to the top menu fading in http://ferranocms.webflow.io/ upon scrolling - has multiple pages.

This is close to what I am trying to accomplish: in regard to the top nav scrolling where there is an initial menu that changes when scrolling: https://www.wellandgood.com/

Thank you in advance,

Nathan


Here is my public share link: LINK
(how to access public share link)


#2

Hi @nathanphilsteele,

I don't know of any tutorial but this is very easy doable.
What you do is this:

  1. Design your navbar(#1) like you always would and dont give it any special position attribute.
  2. Drag in another navbar(#2) and design this one differently, but you can use the same classes if you like.
  3. Set #2 position: fixed, top; display: none and move it up the height it has, e.g. 80px.
  4. Assign your navbar a scroll interaction, e.g. 500ms and 50% offset, and also set display: block;
    4.1 Optional: Give it a good z-index
  5. Enjoy

Best,
Karl-Heinrich


#3

Double-Post.

But for good reason :slight_smile:
I've built it for you. Take a look here.
Though I would recommend you give it a try yourself first.

If you get stuck, here is the read-only link.

Best,
Karl-Heinrich


#4

Hi @Karl-Heinrich,

I really appreciate the example...however, the interaction is still dependent upon an element on the specific page.

  • What I need is code that does that same action on any page. I'm going to have tons pages blog posts categories, e-commerce, etc.

Something to work like https://www.wellandgood.com/ where it is based on scroll pixels from top, regardless....nothing that uses the element dependent interactions....some real code

I've created the components to work with https://preview.webflow.com/preview/a-living-theory?preview=a94ce00d956e347412f774b183f9f4e7

All I need is some code :smiley:

Best,

Nathan


#5

Ok I still don't get it. I'll give you four more solutions, please let me know if any of these work for you.

  1. Don't use any interaction and just give your first section/div whatever a higher z-index, so the second nav bar will hide behind your content and only appear as soon as the user scrolls past.

  2. Place a div somewhere with absolut positioning so it is not visible and apply the interaction in my example. Make this div a symbol and drop in on any page you have. Make it also part of your collection page templates.

  3. Hire someone :smile:

  4. Use this (at your own risk of course). You can see the script in action here.

jQuery

<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">

JS

<script type="text/javascript">
(function ($) {
  $(document).ready(function(){
	// hide .jsnavbar first
	$(".jsnavbar").hide();
	// fade in .jsnavbar
	$(function () {
		$(window).scroll(function () {
  // set distance user needs to scroll before we fadeIn jsnavbar
			if ($(this).scrollTop() > 200) {
				$('.jsnavbar').fadeIn(500);
			} else {
				$('.jsnavbar').fadeOut(500);
			}
		});
	});
});
  }(jQuery));
</script>

#6

Hi @Karl-Heinrich,

4 is perfect!

I guess I don't mind #3. However, I guess I just figured this interaction was common enough now...webflow would have put a tut out for it, and it feels a little silly to have to pay for it sort of.

If you be kind enough:

  • Relative to #4, do I name my 2nd navbar "jsnavbar"?

  • Where specifically do I embed the code?

*** I went ahead and named 2nd navbar "jsnavbar" and pasted the other in the custom code section but it feels like the jQuery is missing something.

*** is there a possibility I could see that template in read only?

Thank you @Karl-Heinrich !


#7

Hi @nathanphilsteele,

I'm glad you like it. And you are right, somehow the closing tag on jQuery is missing.

</script>

The read-only link is the same as before, meaning this one.

the . in the script indicates that this is a class. So you could either name your navbar jsnavbar or change it in the script to the classname you are using. You can also set display:none; and leave the $(".jsnavbar").hide(); out of the script if you don't need it.

Embed the code inside a script that gets executed on every page. E.g. webflow.js
So just open your dashboard, navigate to settings -> custom code and paste in in the <head> tag.

Could you select my previous post as solution for others to find :blush:? Thank you!

Best,
Karl-Heinrich


#8

This is great @Karl-Heinrich !

  • Curious if I could have the jsnavbar drop down from the top instead of fade in?

** Btw, thought you and anybody else that finds this post might like to know that setting display:none; is the best way to go...the jsnavbar pops into view otherwise for a few seconds upon load if using the custom javascript to do it.

Best,
Nathan


#9

@Karl-Heinrich This is a great example of what I would like the top nav to do http://ferranocms.webflow.io/


#10

Well actually its really easy stuff :laughing: But I am glad you like it.

Yes of course thats possible, jQuery comes packed with lots of stuff. I've updated the demo.

If you want to tweak the easing or the duration, take a look here.

Best,
Karl-Heinrich

<script type="text/javascript">
(function ($) {
  $(document).ready(function(){
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 200) {
                   $(".jsnavbar").slideDown();
			} else {
                   $(".jsnavbar").slideUp();
			}
		});
	});
});
  }(jQuery));
</script>

#11

So cool!

Much appreciated @Karl-Heinrich !

Best,

Nathan


#12

You're welcome!
Make sure you tag me when your site is finished and you post it in the 'show & tell' category :wink:

Best,
Karl-Heinrich


#13

Definitely! @Karl-Heinrich


#14

Hi @Karl-Heinrich,

I've been noticing a funny behavior and was curious if you might not what's causing it:

The jsnav moves up as one scrolls...thoughts?

http://a-living-theory.webflow.io

Thank you @Karl-Heinrich,

Bathan


#15

Hello there Nathan,

I can tell you that this is not supposed to happen haha.
Unfortunately, I can't seem to recreate this. I've tried in the three major browsers and everything works fine. Could you tell me your setup and maybe how I can recreate the funny behaviour you are seeing?

Have you tried using incognito mode in Chrome? Does the behaviour still occur?

Best,
Karl-Heinrich


#16

Wow! I really appreciate the quick feedback! @Karl-Heinrich

I tried it Chrome, Safari, and Firefox...appears to only happen in Safari.

Thank you @Karl-Heinrich

Nathan


#17

You're welcome :slight_smile:
Though I can't recreate this behaviour and therefore can't debug it.
Do you have any Plug-Ins installed in Safari?

Can you try testing on a fresh installation / other machine?

Everywhere I test, no navbar issue.


#18

Hi @Karl-Heinrich,

I have Safari version 9.0.1 and I have the extension What the Font

** Question do those logos distort like that? I decided to try .svg... appears I shouldn't. Ha!

Thank you @Karl-Heinrich,

Nathan


#19

Hi @nathanphilsteele,

No dont worry! Keep using SVGs, thats very good. The browser you see is deprecated and the issue with the logos is caused by flexbox. Only old browsers have major problems with flex.

I dont think there is an issue here. Keep testing though and tell me if the behaviour persists.

Best,
Karl-Heinrich


#20

Thank you so much @Karl-Heinrich !

Nathan