Show Navbar only when scrolling to top on mobile (Bootstrap 4)

Question

I want to show the navbar on mobile only if the user scrolls to the top of the page.

At the moment it's stuck on the top everytime the user scrolls down or up. I'm using the code from here: https://stackoverflow.com/a/42250478/1788961 Here's the example: https://www.codeply.com/go/H7ZKuxKTKm

My JS code:

new IntersectionObserver(function(e,o){
        if (e[0].intersectionRatio > 0){
            document.documentElement.removeAttribute('class');
        } else {
            document.documentElement.setAttribute('class','stuck');
        };
    }).observe(document.querySelector('.trigger'));

Edit: to clarify what I want:

I don't want the navbar on mobile to be sticky. It should scroll away with the rest of the site. But if I'm on the bottom of the page and I scroll to the top, the navbar should appear on the top and stay there as long as I scroll to the top.

I don’t know how to add the stuck class only if i scroll to the top on mobile — Cray, Jun 17 '18 at 12:32

score 0 · Answer 1 · answered Jun 17 '18 at 12:35

0

The class "sticky-top" makes the navbar stick to the top of the page even if the user scrolls. Taking it off fixes your issue.

Example here: https://www.codeply.com/go/wWKGkjYdGy

answered Jun 17 '18 at 12:35

souzan

289
1
2
14

but I don't want it off, I need it to appear only if I scroll to the top – Cray Jun 17 '18 at 12:37
I don't understand. The navbar is visible when you scroll to the top. Do you mean you want it visible if the user's at the bottom and starts scrolling up? – souzan Jun 17 '18 at 12:38
this jsfiddle does something very similar http://jsfiddle.net/mariusc23/s6mLJ/31/ – souzan Jun 17 '18 at 12:43
did that jsfiddle help? – souzan Jun 18 '18 at 08:45

Carol Skelly · Accepted Answer · 2018-06-17T13:09:27.097

0

You would use a CSS media query only apply position:sticky on mobile (ie; <768px)...

.sticky-top {
    position: static;
}

@media (max-width:768px) {
    .sticky-top {
        transition: all 0.25s ease-in;
        position: sticky;
    }

    .stuck .sticky-top {
        background-color: #222 !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

https://www.codeply.com/go/1b80jD3Tpg

If you want the opposite effect (non-sticky navbar on mobile) just reverse the media query to min-width instead of max-width...

@media (min-width:768px) {
    .sticky-top {
        transition: all 0.25s ease-in;
        position: sticky;
    }

    .stuck .sticky-top {
        background-color: #222 !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

https://www.codeply.com/go/4RtpB24k23

edited Jun 17 '18 at 13:09

answered Jun 17 '18 at 12:49

Carol Skelly

351,302
90
710
624

Yes, but then the navbar doesn't show if I scroll to the top – Cray Jun 17 '18 at 12:54
Don't know what you mean. It doesn't show at the top when? – Carol Skelly Jun 17 '18 at 12:57
I want to show the navbar on mobile only if I scroll to the top. – Cray Jun 17 '18 at 12:59
And that's what it's doing. I think you need to clarify the question. Do you *not* want to show the navbar at all on non-mobile? The expected behavior isn't clear. – Carol Skelly Jun 17 '18 at 13:01
I don't want the navbar on mobile to be sticky. It should scroll away with the rest of the site. But if I'm on the bottom of the page and I scroll to the top, the navbar should appear on the top and stay there as long as I scroll to the top. – Cray Jun 17 '18 at 13:03
That sounds like you don't want it to be sticky. "sticky" means it appears on the top as you scroll. If it disappears as you scroll away then it 's not sticky. – Carol Skelly Jun 17 '18 at 13:05
ah ok, that's my fault. sorry to be not clear about that – Cray Jun 17 '18 at 13:07

Show Navbar only when scrolling to top on mobile (Bootstrap 4)

2 Answers2