Sticky Menu

by Glynne Turner

HTML

<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<object data="https://agskent.co.uk/AGSNEW/wp-content/uploads/2025/03/ags_logo.svg" class="logo" alt="AGS KENT" type="image/svg+xml">
  					<img src="https://agskent.co.uk/AGSNEW/wp-content/uploads/2025/03/AGS.png" class="logo" alt="AGS KENT">
				</object>
</div>
<div class="col-md-3">
email
</div>
<div class="col-md-3">
tel
</div>
</div>
</div>
	<nav>
		<div class="container">
			<ul>
				<li class="active"><a href="index.html" data-scroll="IE">FireFox</a></li>
				<li class="blue"><a href="galerija.html" data-scroll="IE">Chrome</a></li>
				<li class="blue"><a href="index.html" data-scroll="IE">Safari</a></li>
				<li class="blue"><a href="index.html" data-scroll="IE">Opera</a></li>
				<li class="blue"><a href="index.html" data-scroll="IE">Internet Explorer</a></li>
		  	</ul>
    	</div>
    </nav>
</header>
    <div id="main">TEXT TEXT TEXT <br />
        TEXT TEXT TEXT <br />
        TEXT TEXT TEXT <br />
    <p style="background:blue">
    MORE TEXT
    </p>    
    </div>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: 'Arial';
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.sticky-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */

.container {
    margin: 0 auto;
    width: 540px;
}

header {
    background: #fff;
    margin-bottom: 20px;
}
.logo{height:130px}
nav {
    height: 36px;
    background: #464b4c;
    border-top: 1px solid #353939;
    border-bottom: 1px solid #2e3131;
    background-image: -webkit-linear-gradient(top, #464b4c, #3f4344);
    background-image: -moz-linear-gradient(top, #464b4c, #3f4344);
    background-image: -o-linear-gradient(top, #464b4c, #3f4344);
    background-image: linear-gradient(to bottom, #464b4c, #3f4344);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
    border-bottom: 3px solid #008ccb;
}
nav a {
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    transition: 0.1s ease-out;
    -webkit-transition-property: background-color, line-height;
    -moz-transition-property: background-color, line-height;
    -o-transition-property: background-color, line-height;
    transition-property: background-color, line-height;
}
nav ul {
    float: left;
    border-left: 1px solid #353939;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid #4d5354;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
nav li {
    float: left;
}
nav a {
    display: block;
    padding: 0 20px;
    line-height: 36px;
    color:...

JavaScript

jQuery("document").ready(function($){
    
    var nav = $('nav');
    var navh = $('nav').outerHeight();  
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 130) {
            nav.addClass("sticky-nav"); 
            console.log(navh)
        } else {
            nav.removeClass("sticky-nav"); 
        }
    });
 
});