Override fixed navbar scroll offset

Design help Animations & Interactions
1

Hey, quick question. I’ve been working on some small fixes for our site and we decided to add a fixed navbar that goes away when scrolling down and comes back when scrolling a few pixels up. I’m using custom JS and it’s working great, but I can’t figure out a way to override Webflow’s offset when scrolling to sections on the same page. It keeps leaving me with 50px (the height of the navbar) of slack at the top as it’s detecting that there’s a fixed nav. Any ideas?

Here’s my public link: https://webflow.com/design/the-crazy-ones-2?preview=a2679115d9e998e52e481eb456447ab5

2

I had the same issue mate, for me, just dropping the navbar into a section did the trick because that takes it out of webflows scope (they only check to give an offset on the page for a navbar when it’s right under the body) I can’t confirm this on your site because you’re using javascript to hide the nav which only works on the live site but I think it should work for ya.

1 Like
3

Edit:
This will only show/hide the nav when scrolling in and out of the first section, I missed that your JS also showed it when scrolling up :frowning:

By the way - you can save yourself the JS and just have the nav hide natively using webflows interactions, took me 15 seconds:

1438×830 745 KB

Select the dither section, add an interaction on scroll, tell it to affect the project header, on scroll into view - move to origin and opacity 100%, on scroll out of view - move up 50px and opacity 0% - then set the scroll out of view offset somewhere between 95% and 98%. ~Preview it in the designer and you’ll see it should do the trick for ya without needin JS - hope it helps :slight_smile:

1 Like
4

Thanks @jaidenraleach
What @deezel is describing is exactly what I am trying to do using Webflow interactions. He described that the nav would hide if you are scrolling down (toward lower page content) and show if you start scrolling back up. It wouldn’t necessarily be based on other objects coming into view, rather the direction you are moving in. That make sense?

Do you have an example (live site) that we could look at?

5

Ah totally missed that he had it set to display on “scroll up” also with the JS - @deezel sorry mate, tried to save ya some JS but missed that - yea the webflow interactions won’t allow you to have it display on scrolling up throughout the site - only on scrolling back up into the home section @Jfly I’d suggest doing something like Deezel did and adding in a JS script - such as this:

$(document).ready(function(){

    $('body').bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta < 0) {
            userScrollDown()
        } else {
            userScrollUp()
        }

    })

    function userScrollDown() {
        $('.navbar').css('top', '-103px')
    }
    function userScrollUp() {
        $('.navbar').css('top', '0')
    }

})
6

Thanks for your replies, I’ll try putting the navbar within a section.
@JFly, here’s the simple JS I’m using to show the nav on scroll up. http://codepen.io/sunnyxyst/pen/DwgFm

I’ve modified it a bit. It relies on a two nested classes that change the state of the navbar, you can check them out at my public link. The .show adds a transparent background that makes it visible over the page content and the .hide moves it up 100% using a transform, which hides it completely. The navbar without nested classes sits on top of the site without a background.

The JS triggers the nested classes based on a few conditions. Basically, it triggers the .hide class when scrolling down and the .show when scrolling up at a higher speed. This allows the user to scroll slowly when reading without triggering the navbar. Finally, reaching the top of the page removes both the .hide and .show classes.

EDIT: Check out the version with JS here. http://the-crazy-ones-2.webflow.com/

7

That’s it!! Exactly what I’ve been looking for! Thanks @deezel and @jaidenraleach

Now to figure out how to implement it.

What’s the esiest/best way (not always the same thing, I know) to do this within Webflow? Now, I know you can paste custom code into the Site Dashboard, but is that how you did it within Webflow or did you Export the site and edit later?

Thanks.

JFly

8

@Jfly yea usually putting the code in the respective sections of the dashboard is the easiest way to do it. You can create the navbar and everything in webflow and then just add the js and other code to the dashboards code section - thats what I’ve always done, it’s what @deezel did too judging by the fact it loads the script on his webflow subdomain he posted.

9

Thanks @jaidenraleach
I’m not that experienced with JS so I’ll need some more help here…
I pasted the code you provided into the footer area on the Custom Code area. I got an error message:

“Line 4 column 38: Expected tag name. Got something else instead.”

I have set my navbar as a symbol so it would show across pages. Not sure if that is the problem…
Any Ideas?

10

@JFly you bet, you always have to wrap script in a script tag so the complete code would be:

<script>
$(document).ready(function(){

    $('body').bind('mousewheel', function(e){

        if(e.originalEvent.wheelDelta < 0) {
            userScrollDown()
        } else {
            userScrollUp()
        }

    })

    function userScrollDown() {
        $('.navbar').css('top', '-103px')
    }
    function userScrollUp() {
        $('.navbar').css('top', '0')
    }

})
</script>

Now don’t forget to change the two .navbar classes in the above code to the the name of the class on your navbar in the designer, and make sure its set to position fixed in the designer.

1 Like
11

Thanks a ton @jaidenraleach

Okay - I must really be a newb. For some reason, I’m not able to get this to work. My navbar is actually named “navbar”. I’m assuming this is pasted into the Footer code area? Do I need to set the item ID as navbar too?

12

@jaidenraleach Correction - It is working - I was looking at it in preview mode. However, it only seems to be working with a mouse scroll rather than a mobile touchscreen scroll or swipe. Could this be true?

Additionally, it seems to just blink the nav on and off without any transition or easing. It would be great to have it ease up and out above the canvas when you scroll down toward the page bottom.

Also, is there any way to add in a pixel scroll range, for instance if you scroll 40 pixels it would cause the nabber to hide but if you scroll towards the top at all it causes it to appear?

Here’s a test page with your code pasted exactly as you provided above. http://mobile-chat-v8.webflow.com Let me know if you need access to the back end.

Thanks - JFly

13

hey @jfly glad it’s working - that is just extremely basic code I typed out as an example -I suggest using @deezel’s code reference if you want both the easing and touch support :wink:

14

@deezel I’m looking for a little help here so I can make my main navbar hide and show when scrolling like the one on your site. Nice work!

Assuming that I name my classes properly to work with your JS code, do I just paste the JS you provided into the Footer Code area of my dashboard? I’ve renamed my navbar “navigation-bar” and also added a Custom Attribute in the Webflow Settings tab with the name “data-nav-status” and a value of “toggle”.

For some reason it’s not working for me even though I’ve published it and am not viewing it in preview mode.

Any help here would be greatly appreciated!

15

Hey, as long as your classes (and nested classes) are named properly, the following code should work just fine. Have a closer look at the code, you should use one class and two nested classes. Adding a transition in the Style section allows you to control the easing curve and timing. Make sure none of the nested classes are applied before publishing, the JS will take care of those.

<script>$(document).ready(function(){

/** ===========================================
Hide / show the master navigation menu
============================================ */

// console.log('Window Height is: ’ + $(window).height());
// console.log('Document Height is: ’ + $(document).height());

var previousScroll = 0;

$(window).scroll(function(){

var currentScroll = $(this).scrollTop();
 /*
  If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.
*/

if (currentScroll > 10 && currentScroll < $(document).height() - $(window).height()){
  /*
    If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav.
  */
  
  if (currentScroll > previousScroll){
    window.setTimeout(hideNav, 50);
  /*
    Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
  */
  } if (currentScroll < (previousScroll - 40)) {
    window.setTimeout(showNav, 50);
  } 
  
  
    
  /* 
    Set the previous scroll value equal to the current scroll.
  */
  previousScroll = currentScroll;
}

if (currentScroll < 1) {
    window.setTimeout(top, 50);
  }

});

function hideNav() {
$(“[data-nav-status=‘toggle’]”).removeClass(“show”).addClass(“hide”);
}
function showNav() {
$(“[data-nav-status=‘toggle’]”).removeClass(“hide”).addClass(“show”);
}
function top() {
$(“[data-nav-status=‘toggle’]”).removeClass(“hide”).removeClass(“show”);
}

});

1 Like
16

Hi @deezel Thanks. It looks like your code might have gotten broken up in the Forum page?

I’ve tried several things to get this to work and, well, it looks like I’m still a newb…

Just to be clear, I’m only interested in having the navigation-bar move up off-canvas when you scroll down 50 pixels or so, and reappear (move back down) when you scroll up quickly.

Here’s what I’ve done:

  1. Added your latest JS to the Custom Code Footer area
  2. Renamed my navbar “navigation-bar”
  3. Added the “data-nav-status” with the value of “toggle”
  4. Published to test

Here’s a link to my project Dashboard if you have a minute to look at that.
https://webflow.com/design/mobile-chat-v8?preview=f3d2c6e65f2d994cc1b93dc9aaae1198

Thank you!

17

Here’s a simpler implementation of your code… Maybe it’d be easier to disect. Thanks again!

https://webflow.com/design/nav-hide-test?preview=aa544e7712c98d48d62466b7d55ad381

19

Hey.
I can’t access the custom code section of your site, but I believe you’re doing it right. Just use the whole piece of code I pasted, including the section that the post editor left out of the code block. Also, make sure your nested classes are named as referenced in the code: “show” and "hide" Looking at your styles, I believe you haven’t created the “hide” nested class yet. You should be good to go.

1 Like
20

Thanks again @deezel

You’re correct, I had not created the “nested” classes, and now have done that. But, looking at your site in Designer I can see the “show” and “hide” classes in the Style list (as well as “visi” and “header”), but it doesn’t look as though they are actually attached to anything in the html as far as I can tell, so I’m confused. Should those classes have different display settings as well, such as 0, -60px for positioning?

I’m a bit unsure on what to do with those.

Also, I did found an error in the JS code that I had pasted, but I think that is fixed. Sorry to be such a pain here. Is there a way for me to give you access to the custom code area?

EDIT: I figured it out FINALLY!! I reread your post from 11 days ago and then looked back over your site and noticed how you had added the transform to the .hide class. I didn’t see that before! (facepalm)

21

Okay - last thing. What part of the JS controls the amount (in pixels) that a user needs to scroll before the nav hides and then how much scrolling the other way to show the nav?

Thank you again! @deezel