Menu
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.)
930
To get the height of the scroll bar the offsetHeight of div is subtracted from the clientHeight of div. OffsetHeight = Height of an element + Scrollbar Height. ClientHeight = Height of an element. Height of scrollbar = offsetHeight – clientHeight.
In summary, scrollTop is how much it's currently scrolled, and scrollHeight is the total height, including content scrolled out of view.
It has zero height because the content inside it is floated. Floated elements are ignored when calculating the height of their parent. This can be easily solved. Setting its overflow property to "hidden" will force it to wrap around floated elements.
I've added to #body_parent height to see the scroll, you can delete that row with height after you create the site.
Here is jsfiddle
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('#header_parent').stop().animate({height: "30px"},200);
}
else {
$('#header_parent').stop().animate({height: "50px"},200);
}
});* {
margin:0 auto;
padding:0;
}
#header_parent {
max-width:1250px;
min-width:750px;
height:50px;
background:#000;
position:fixed;
}
#body_parent {
height:1200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<!-- Header -->
<div id="header_parent">
</div>
<!-- Body (homepage) -->
<div id="body_parent">
</div>
<!-- Footer -->
<div id="footer_parent">
</div>
</body>Or 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>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Your jQuery/Javascript code -->
<script type="text/javascript">
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('#header_parent').stop().animate({height: "30px"},200);
}
else {
$('#header_parent').stop().animate({height: "50px"},200);
}
});
</script>
</body>
</html>
And if you want to set smoothness replace 200 with your number, 200 mean duration in miliseconds.
$('#header_parent').stop().animate({height: "50px"},200);
You can do this without jQuery.
var header = document.getElementById("header_parent");
window.onscroll = function(e) {
if(window.scrollY) {
if(window.pageYOffset > 50) {
header.style.height = 30;
} else {
header.style.height = 50;
}
}
}
You could also toggle class names inside the if block instead of setting the height explicitly.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
