headroom.js | Give your pages some headroom Hide your header until you need it | Frontend Framework library

This is my first time dealing with Gatsby and React, so I might be using the wrong approach on this matter. Anyway, this is what is going on.

From the gatsby-starter-hello-world, I'm building this site that will be composed of a front page with a Hero on the top, holding the intro information. Right bellow, I'm intending to insert some content (I'm not sure about what yet), with this

Anyway, right now, this is what I have for a Layout.js

How to hide navigation menu bar on scroll down and it should appear on scrolling up using angularjs? As I have seen a solution that library 'headroom.js' is quite useful but I am unable to implement.Please suggest an appropriate solution.

I use headroom.js to hide/show navbar on scroll. Works great. On scrolling up, nav has a solid background colour and when nav is at top, background should be transparent. No issues on Chrome but an issue with Safari.

Markup:

I want to show a sticky menu nav when scrolling up while also having a delay before showing the nav menu. I can do this with animate and opacity, but it's not as effective.

I tried to show the nav menu when scrolling up 50px from the current position, but it didn't work.

Here's the script:

I have #event div an it's a hidden div on my page When I scroll down my page if I near to my #event div then be visible.but when I scroll down to near my #event div then it becomes visible but there is a little bug because when I scroll down my div is shaking.

so where is my mistake ?

I see a plugin headroom.js but I don't want to use any plugin I want to do by myself.I guess it is a basic.

footnote: my #event div is in center of the #page div with red background

I would like to improve an existing code that allows me to show the navbar once the page is loaded and after the user scrolls down it disappears. I want to make the navbar appear every time the user scrolls up. Basically, I need a Headroom plugin, but as a pure javascript. I would consider any other simple alternatives.

That's is some HTML and the Javascript itself:

I'm using the awesome Headroom.js plugin to build an auto-hiding header. The header is static from start and becomes pinned after an offset (when scrolling down) and then back to static (when it's back to the top).

Here is what I have done: http://codepen.io/netgloo/pen/KmGpBL

but I got 2 problems:

• scrolling down from top: when the header becomes pinned, I see it slides down and suddenly slides up
• scrolling up from middle page: when the header arrives to the offset it disappears, but I need keeping it pinned to the top

Someone could give me some help or ideas? Thanks

Here is how I initialize the plugin:

Introductory information: I've made a fixed menu button to show the navigation menu when using a mobile device. For this application I'm using the Headroom.js script to make the button smaller when scrolling downwards to ensure that it doesn't block too much of the content. The animation/transition is applied by adding a class with the given changes.

In the original method i changed the size and look of the button by changing height/width of the parent element and padding of the child element with CSS (and css transition).

The new method, which I've read could/should be better according to various sites, is changing the size of the button by using transform: scale(). Note that i'm also moving the element a bit by also applying translate3d(20px,20px,0) in this method. However, it feels a bit smoother when scrolling using the transform: scale() method (could be a placebo effect though), but using chrome dev tools' timeline gives me seemingly inconclusive results.

Therefore a part of my question is also how I should evaluate the best method. Is timeline in Chrome Dev tools the best option, or is there a better way to do it? And which elements of the timeline should I base my choices on? and the other thing is, based on your interpretation of the images and/or tests combined with your knowledge, which method performs the best (or should perform the best in theory)?

Beneath you can see two examples of the timeline with each method. Changing height/width and padding (original method):

Method using transform: scale() to change the size:

Also you can try the different methods in fiddles here:
link: Original method changing height/width and padding
link to new method: using transform:scale

Please ignore the poor layout of everything; especially the button. The ugly image inside the menu button is just to show, that there's an image included in the layout on my own page and to take that into performance considerations. The images in the back is also included since it's a webshop with a lot of images which could influence performance.

CSS for added class that makes the changes in the original method: