I have been working on creating a header that shrinks as you scroll down, stopping at a certain point. The header also includes a logo that moves up with it.
However, I'm facing an issue where $(window).scrollTop(); doesn't respond quickly enough. If you scroll too fast, the logo may end up outside of the header or the header may be slightly oversized.
I'm struggling to find a better solution for this. Any help or ideas would be greatly appreciated.
Here is the code I currently have:
var widgets = {
header: function() {
var $header = $('.header');
var $logo = $('.header__title');
var $headerHeight = $header.height();
$(window).on('scroll resize', function(event) {
var windowWidth = window.innerWidth;
var windowScrollTop = $(window).scrollTop();
if( windowScrollTop < 100) {
$logo.css('margin-top','-'+(windowScrollTop)+'px');
}
if ( windowScrollTop < 230) {
$header.css('height',($headerHeight - windowScrollTop)+'px');
}
});
}
}
$(document).ready(function() {
widgets.header();
.....
You can see an example here: http://jsfiddle.net/7wp51gu6/