oslayer,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#navbar22 {
z-index:100!important;
background-color: #FF0000;
}
/* Navbar links */
/* Page content */
.content22 {
padding:16px;
}
.sticky22 {
position: fixed;
top: 0;
width: 100%;
}
.sticky22 + .content22 {
padding-top:60px;
}
body{
height: 1200px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', myFunction);
var navbar = document.getElementById("navbar22");
var sticky_1 = navbar.offsetTop;
var w = navbar.scrollWidth;
function myFunction() {
if (window.pageYOffset >= sticky_1) {
navbar.classList.add("sticky22");
navbar.style.width = w + "px";
} else {
navbar.classList.remove("sticky22");
navbar.style.width = "";
}
}
});
</script>
</head>
<body>
<div id="navbar22">
.....
</div>
</body>
</html>