Hello all,
I’m having issue’s wrapping my head around the scroll interaction medium is using on article’s. As soon as you scroll up the nav bar appears, but as soon as you scroll down it disappears. Here’s an example: Hide header on scroll down, show on scroll up | by Marius Craciunoiu | Medium. If anyone understands how to create this interaction please let me know, thank you
Here is my public share link: LINK
(how to access public share link)
@Jordanpuga I was playing around with the the JSFiddle referenced in that Medium post and integrated it into a Webflow site which I also made cloneable: https://webflow.com/website/Medium-Navbar-in-Webflow
Just add the script which they have in the footer of the jsfiddle between two script tags:
<script>Javascript goes here</script>
Then add in a div block and set it to a be a “header” HTML5 element in the element settings:
Add a class to the “header” element (I just called it header in this instance) and style that header.
Then add a combo class of nav-up and style the position of the header when you want it out of view such as position: top of -60px (because the header is 60px tall in this case).
Thereafter, remove the nav-up combo class from the element.
Add a Transition setting for the “Top” position on your header element, this will set the speed/animation of the header elements position as it slides up and down. Without setting this the animation will not be smooth but rather look rigid, almost like a display: block, display: none style.
Then publish the site and you should be all set, hope that this is helpful 
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
