changing div height on scroll

css, html, jquery

Solution

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);

Problem

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.)

Original source