What I want is a div at the top (header) that will be at maximum height (50px) when you first load the page, and when you're scrolling down the page I want the height to smoothly decrease to a minimun height of 30px. I'm guessing I should use jQuery for this but I'm not that experienced so I don't know a solution at the moment.
Here's my current, undeveloped HTML and CSS:
[HTML]
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<!-- Header -->
<div id="header_parent">
</div>
<!-- Body (homepage) -->
<div id="body_parent">
</div>
<!-- Footer -->
<div id="footer_parent">
</div>
</body>
</html>
[CSS]
* {
margin:0 auto;
padding:0;
}
#header_parent {
max-width:1250px;
min-width:750px;
height:50px;
}
So to be clear, the #header_parent
element is what I'm talking about.
I also found a website on which they achieved this matter: tvgids.tv (don't look at the content, it's they upper grey header I'm talking about. I tried looking at the source code but that didn't give me any more knowledge.)