Navigation Menu

Fixed position on scroll and equall items distribution horizontally.

HTML

<body>
<nav id="nav">
	<ul>
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
	<li>item 4</li>
	<li>item 5</li>
	<li>item 6</li>
	</ul>
</nav>
<main>
	<p>I need to detect if a user is scrolled to the bottom of a page. If they are at the bottom of the page, when I add new content to the bottom, I will automatically scroll them to the new bottom. If they are not at the bottom, they are reading previous content higher on the page, so I don't want to auto-scroll them since they want to stay where they are.<br/>
	How can I detect if a user is scrolled to the bottom of the page or if they have scrolled higher on the page?</p>

	<p>I need to detect if a user is scrolled to the bottom of a page. If they are at the bottom of the page, when I add new content to the bottom, I will automatically scroll them to the new bottom. If they are not at the bottom, they are reading previous content higher on the page, so I don't want to auto-scroll them since they want to stay where they are.<br/>
	How can I detect if a user is scrolled to the bottom of the page or if they have scrolled higher on the page?</p>

	<p>I need to detect if a user is scrolled to the bottom of a page. If they are at the bottom of the page, when I add new content to the bottom, I will automatically scroll them to the new bottom. If they are not at the bottom, they are reading previous content higher on the page, so I don't want to auto-scroll them since they want to stay where they are.<br/>
	How can I detect if a user is scrolled to the bottom of the page or if they have scrolled higher on the page?</p>

	<p>I need to detect if a user is scrolled to the bottom of a page. If they are at the bottom of the page, when I add new content to the bottom, I will automatically scroll them to the new bottom. If they are not at the bottom, they are reading previous content higher on the page, so I don't want to auto-scroll them since they want to stay where they are.<br/>
	How can I detect if a user is scrolled to the...

CSS

body
{
    margin: 0;
    padding: 0;
    font-family: Arial;
    background: Beige;
}
nav
{
    width: 100%;
	position: absolute;
	top: 0;
}
nav.fixed 
{
    position: fixed;
    top: 0;
    left: 0;
}
ul 
{
    display: table;
    list-style-type: none;
	margin: 0;
    padding: 0 20px;
    height: 60px;
    width: 100%;
    background: DarkSlateGray;
	box-sizing: border-box;
}
li 
{
    display: table-cell;
    padding: 0;
    margin: 0;
    width: auto;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: khaki;
    cursor: pointer;
}
li:hover
{
    background: Teal;
}
main
{
    padding: 100px 40px 20px;
}

JavaScript

var body = document.body;
var doc = document.documentElement;
var nav = document.getElementById ("nav");

window.addEventListener ('scroll', function (event)
{
    var h = this.innerHeight;
    if ((body.scrollTop || doc.scrollTop) > h)
	{
		nav.className = "fixed";
	}
    else nav.className = "";
}, false);