How can I keep the navbar at top when scrolling up past the top of the page?

Question

In browsers such as Safari and Chrome for Mac, when you try to scroll up when at the beginning of a page, you are still able to scroll up a little bit, but with resistance, and the page bounces back when you let go.

I have a navbar going across the top of my page. When the user scrolls up past the top of the page, the navbar moves down with the rest of the page, as in this demo video. How can I make the navbar stay at the top of my page even during this scrolling?

@Thinker Only when the page 'bounces' so there isn't the white space at the top. In all other cases the navbar will stay at the stop of the page and when the page scrolls it will move out of view as it normally would. — Kian Cross, Jun 20 '16 at 06:48
I think it'd be helpful if you showed us a gif or something of what you mean by "bounce". http://www.cockos.com/licecap/ — Adam Zerner, Jun 20 '16 at 06:56
@frnt Codepen, jsfiddle etc don't have bounce on the output like my browser does. I'll try and make a gif. — Kian Cross, Jun 20 '16 at 07:02
@AdamZerner [Here](http://g.recordit.co/nz2Sd8ermb.gif). The red bar is the navbar. You can see when I scroll down, the 'bounce' allows a white bar to show at the top. Instead of that, I'd like the navbar to stay stuck to the top. — Kian Cross, Jun 20 '16 at 07:07
@crossboy007 got that, can you add your some code over-here. — frnt, Jun 20 '16 at 07:44
Related question: [Prevent “overscrolling” of web page](http://stackoverflow.com/q/12046315/578288). It’s about making this “bouncing” feature not work at all on a page, instead of making part of the page react to it. — Rory O'Kane, Jun 20 '16 at 09:24
At code, or a better example. It isn't clear at all what you're after. Also, the content that you add as comments should also be added to your original post so everyone understand what you're doing. — Bram Vanroy, Jun 20 '16 at 09:25

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

I guess you want to create a "sticky header" that stays at the top of the page when you scroll down. You can do that by using CSS "position" rule over your navbar:

position: fixed;
top: 0;

Note: maybe this is a duplicate of this question.

edited May 23 '17 at 11:58

Community

1
1

answered Jun 20 '16 at 07:09

MmMnMr

111
3

score 0 · Answer 2 · answered Jun 20 '16 at 08:10

Try this solutions, I'm just guessing according to your gif.

html,body{overflow:hidden} (or)
#nav{position:fixed;top:0; or margin-top : 0;} (or)
$("#navbar").css("marginTop",'0')

In 3rd example you can try saving your css value using variable and then by using if condition you can try and may get rid from that bounce effect.

score 0 · Answer 3 · edited Jun 21 '16 at 08:47

0

I think the only way is to disable the bounce effect. Bounce effect is working on the HTML tag itself, so no absolute or fixed positioning will make it stay. Try to apply hidden property to html tag in overflow, like this: html {overflow: hidden}

edited Jun 21 '16 at 08:47

Pirate X

3,023
5
33
60

answered Jun 21 '16 at 08:05

Alexandr Miroshnychenko

1
1

How can I keep the navbar at top when scrolling up past the top of the page?

3 Answers3