As I scroll down, I want the height of a specific div to decrease instead of the window itself scrolling. The code snippet below illustrates the simple div header setup that I am using:
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="javascripts/headani.js"></script>
</head>
<body>
<div id="pageTop"></div>
<div id="pageArticle">
<div class="siteDesc">
<p id="hello"></p>
</div>
</div>
</body>
</html>
The corresponding CSS for this is as follows:
body {
margin: 0 0 0 0;
background-color: beige;
}
#pageTop {
width: 100%;
height: 450px;
background-color: tan;
}
#pageArticle {
width: 100%;
height: 1000px;
background-color: rgba(0,0,0,0);
}
#siteDesc {
height: 500px;
background-color: black;
width: 1000px;
margin: auto;
}
Additionally, here is the jQuery implementation (please note that it's a rough model with testing variables):
$(document).ready( function() {
var headHeight = $('#pageTop').height();
$(window).scroll(function() {
if (headHeight > 50) {
$(document).bind("scroll", function(e) {
e.preventDefault;
})
headHeight = (headHeight - 1);
$('#pageTop').css('height', headHeight);
}
$('#hello').html($(document).scrollTop() + "<br/>" + headHeight);
})
});
I have successfully managed to minimize the div on both scroll up and scroll down actions, but my issue lies in preventing the body from scrolling until the height of 'pageTop' is reduced to 50. I attempted to bind the scroll event but encountered some challenges! Any suggestions on how best to accomplish this?