originally posted in r/Websites:

https://www.reddit.com/r/Websites/comments/1xbhob8/is_it_crazy_to_suggest_building_a_static_html/

Edit: please reply/comment directly on the original post as I’m not the OP. I pasted the post here since cross posting here is disabled.

So for context I already know how to program in Python in the terminals Spyder and Jupyter Notebook, however I want to start learning HTML too.

Does my knowledge of Python help me with HTML or not? How should I start learning HTML? And in what terminal can I put HTML code?

For my first post, I will share a easy navigation trick for programming an HTML-based website. Your first step in going into the <head> tag of the HTML document and inserting the following tag. It should look something like this:

<!DOCTYPE html>

<head>
<link rel = "stylesheet" href = "main.css">
<script src = "js/navbarPeek.js"></script>
</head>

<body>
<div align = "center" class = "navbarContainer" id = "navbarContainer" margin = "0" width = "100%">
<iframe class = "iframeNavbarContainer" src = "navigation.htm" width = "100%"></iframe>
</div>

</body>

This script portion creates a floating <iframe> that contains another html document whose sole purpose is to function as a navigation bar for your website:

<div align = "center" class = "navbarContainer" id = "navbarContainer" margin = "0" width = "100%"> <iframe class = "iframeNavbarContainer" src = "navigation.htm" width = "100%"></iframe> </div>

Its class of "navbarContainer" means that its size, style, and position on the page is controlled by a CSS stylesheet; in this case, "main.css".

The <script> tag in the header contains all relevant information about the script itself, its source is in a folder called "js" and is named "navbarPeek.js".

This post will focus the function of the navigation bar at the top of the page. While specific CSS elements will be discussed to properly position it, specific design elements will be discussed in a future posting.

As far as the JavaScript itself is concerned, it is deceptively simple:

var prevScrollPos = window.pageYOffset;
window.onscroll = function navBarPeek() {
var currentScrollPos = window.pageYOffset;

if (prevScrollPos > currentScrollPos)
{
document.getElementById("navbarContainer").style.top = "0";

} else {

document.getElementById("navbarContainer").style.top = "-50px";
}

prevScrollPos = currentScrollPos
}

There are only two variables being used:

-prevScrollPos
-currentScrollPos

When the script loads, it sets the variable prevScrollPos, upon scrolling, the other variable currentScrollPos is set. The Java script compares the two values and if the currentScrollPos variable is greater than prevScrollPos, the navigation bar retracts by 50 pixels and then sets prevScrollPos to the value of currentScrollPos and repeats the script when scrolling happens once more. Scrolling upwards causes the navigation bar to show itself again.

Using a CSS stylesheet to position the navigation bar is essential for proper function. The following is the style sheet entry for the class of the navigation bar, navbarContainer:

.navbarContainer {
height: 50px;
margin-left: 0;
margin-right: 0;
position: fixed;
top: 0;
transition: top 0.3 ease;
width: 95%;
z-index: 10;
}

Be sure to update the Java script to reflect the height of your navigation bar.

If your navigation bar is 100 pixels in height, then your Java script will be required to use that same value in order for the script to properly hide the navigation bar, like so:

var prevScrollPos = window.pageYOffset;
window.onscroll = function navBarPeek() {
var currentScrollPos = window.pageYOffset;
if (prevScrollPos > currentScrollPos)

{

document.getElementById("navbarContainer").style.top = "0";

} else {

document.getElementById("navbarContainer").style.top = "-100px";
}

prevScrollPos = currentScrollPos
}

Take notice that the value near the bottom of the script now says "-100px" instead of "-50px".

If your navigation bar height is 50, the Java script must read:

document.getElementById("navbarContainer").style.top = "-50px";

If your navigation bar height is 100, the Java script must read:

document.getElementById("navbarContainer").style.top = "-100px";

Once you get these elements secure and the navigation box functions as it should, you can get started on creating your navigation box HTML document, "navigation.htm".

These two lines of JavaScript are used to change the content of an HTML element on a webpage. The main difference is that innerHTML can interpret HTML tags, while innerText displays text as plain text.