How To Slide Down a MenuBar on scroll

[red_sting]

Hi there
I am trying to implement a menubar that is initially hidden and appears on scrolling.

I tried the following code from W3Schools in a placeholder.

How To Slide Down a Bar
Step 1) Add HTML:

Create a navigation bar:
Example
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
Step 2) Add CSS:

Style the navigation bar:
Example
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: -50px; /* Hide the navbar 50 px outside of the top view */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}

#navbar a:hover {
background-color: #ddd;
color: black;
}
Step 3) Add JavaScript:
Example
// When the user scrolls down 20px from the top of the document, slide down the navbar
// When the user scrolls to the top of the page, slide up the navbar (50px out of the top view)
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
}

It works fine. It will be nice though to be able to implement it to my own menubar

Any suggestions or ideas guys?

To give you an idea of what I am lokking forward to here is a link:
https://www.infurmag.com/

[Acorn]

Next time don't copy an example that exists elsewhere, just link it.

The W3 example is next to useless for Xara NavBars as you have to recreate everything for it in HTML.

I created a Xara-type solution: https://www.talkgraphics.com/showthr...is-out-of-View
The JS code is actually in the Website Head.
The Widget Body code in within the offPage icon. This make it invisible in the rendered solution.

You make anything you want to appear when the offPage icon move up have a Name htmlclass="bar".

Acorn

[Acorn]

If this is too hard, a fudge is to use the Reveal on an object farther down.
This has its limitations as you have no control over the height of the viewer's browser.

My 'fix' is to Stick a Hamburger link to the 'bar' anchor under the NavBar so scrolling enough causes the NavBar to reveal as does just clicking on the Hamburger, which move the scroll down for you.

Xara - simple Menu Reveal.xar

'bar' is set to 50% Transparency. You can change it to 99% to hide it.

Acorn