Kevin Aartsen Kevin Aartsen - 6 months ago 7
jQuery Question

menu fixed after a specific height

Hello everyone i have a problem and i hope you guys can help me out here.
So basically i have a div which is meant to cover your whole screen no matter what device or what size ur browser is, this div will always be fullscreen. Under that div i have a menu that uses some jquery to become fixed after a certain height.(not the height i want)

What i want is my menu to become fixed after it passed the full screen.
I know this is a lot of information but you will get what i mean after u check my jsfiddle.

Anyways Heres my code:

$(window).scroll(function () {
if ($(window).scrollTop() > 100)
$('#menu').css('position', 'fixed').css('top', '0');
else
$('#menu').css('position', 'static');
});


<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
</head>
<body>
<div id="container">
<div id="headcontainer"></div>
<div id="menu">
<div id="logo">
<p>Hier komt een logo</p>
</div>
<ul>
<li>Home</li>
<li>Over</li>
<li>Contact</li>
<li>Producte</li>
</ul>
</div>
<div id="content">
<div class="text-box">
</div>
<div class="text-box"></div>
</div>
</div>
</body>
</html>


/*Global*/
* { margin: 0px; }

#container {
margin-left: auto;
margin-right: auto;
width: 100%;
}

#headcontainer {
width: 100%;
height: 100vh;
background-color: pink;
}

/* navigation */
#menu {
height: 100px;
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
max-height: 100px;
border: 1px solid black;
border-top: none;
}

#menu li {
display: inline-block;
text-decoration: none;
padding-left: 20px;
position: relative;
padding-right: 20px;
}

#menu ul {
float:right;
height:100%;
width: auto;
line-height: 100px;
margin-right:25px;
}

#menu ul li:hover {
cursor:pointer;
color: white;
}

#logo {
height: 50px;
width: auto;
background-color: red;
float: left;
margin-top: 0px;
margin-top: 30px;
margin-left: 60px;
}

/*content*/
#content {
width:100%;
height:auto;
min-height:10000px;
margin-left: auto;
margin-right: auto;
}

.text-box {
width:40%;
height:auto;
background-color:blue;
min-height:100px;
float:left;
margin-left:5%;
margin-right:5%;
margin-top:50px;
}

Answer

In your code, instead of put

if ($(window).scrollTop() > 100) {

you should put

if ($(window).scrollTop() > window.innerHeight) {

Updated JSFiddle.