jQuery scroll down detect (used this for menu / top nav reduce / swap on scroll)
v2 // updated to check on the fly not just on page load
// updated to check for window resize and update margin dynamically
// reduce menu on scroll down
jQuery(document).ready(function($) {
$(window).load(function() {
// cache dom
var $window = $(window);
$header = $(".header");
function checkWidth() {
// cache dom
var $windowsize = $window.width();
var $headHeight = $header.height();
var $wrapper = $('.wrapper');
var $userTab = $('#user').height();
// resize top margin of header based on header height (minus user tab)
// to clear fixed position menu content
if ($windowsize > 991 ) {
// $wrapper.css({'margin-top': $headHeight - $userTab + 10});
$wrapper.css({'margin-top': $headHeight});
console.log($headHeight);
}
// recalculate depending on window width
else {
$wrapper.css({'margin-top': $headHeight});
}
}
// run function on page load
checkWidth();
//bind event listener to check on window resize
$(window).resize(checkWidth);
// detect scroll down and reduce menu size / style
$(document).on("scroll", function() {
if ($(document).scrollTop()>20) {
$header.removeClass("large").addClass("small");
} else {
$header.removeClass("small").addClass("large");
}
});
});
});
// reduce menu on scroll down
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
$header = $(".header");
if ($(document).scrollTop()>100) {
$header.removeClass("large").addClass("small");
} else {
$header.removeClass("small").addClass("large");
}
});
});
// update header size and margin based on load size
$(function() {
var headHeight = $('header').outerHeight();
$('.welcome-home').css({'margin-top': headHeight });
});