Kevin Aartsen Kevin Aartsen - 6 months ago 23
CSS Question

fixed menu not working

I want my menu to stay on its place while i scroll.
but when i add a

position:fixed;
the whole thing goes out of the place i want it to be. In the jsfiddle u can see how it is now and how i want it to be. Only thing wrong with it is that if i change the position to fixed it doesn't stay where i want it to be anymore.

<!DOCTYPE html>
<html>

<head>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<title>random</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/style.css"> -->

</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>

<style>
/*Global*/

* {
margin: 0px;
}

body {}

h1,
h2,
h3,
h4,
h5,
h6 {}

h1 {}

h2 {}

h3 {}

h4 {}

a {}

img {}

#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 {

}

#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:1000px;
min-height:500px;
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;
}

</style>


fiddle https://jsfiddle.net/mvmbtcby/

EDIT:
Im trying to achieve something like this:

http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html

Answer

Ok, i see what you want and i think you will code this behaviour in Javascript.

This kind of solution will be okay for you ??

Démo : http://jsfiddle.net/cc48t

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
         $('#scroller').css('top', $(window).scrollTop());
    }
}
);
Comments