This script creates a shrinking effect on a box followed by a fade-in/out transition when the scroll position changes. However, the issue is that it triggers every time there is a scroll position change. For example, if the scroll position is at 100px and the user scrolls down once more, the text inside li.um would fade in and out unnecessarily. Is there a way to modify the code so it only runs when the scroll position switches from greater than 60 to less than 60, and vice versa?
$(window).bind('scroll', function() {
var viewportWidth = $(window).width();
if ($(window).scrollTop() > 60) {
$("li.um").fadeOut(200);
$("ul.undermenu").stop(true, false).animate({width:'160px'}, { duration: 500, queue: true});
$("ul.undermenu").animate({height:'60px'}, { duration: 200, queue: true});
window.setTimeout(function () {
$('li.um').html('12345678901 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27574253426755524152544a52544e4409444809524c">[email protected]</a>');
}, 700);
$("li.um").fadeIn(200);
}
else {
$("li.um").fadeOut(200);
$("ul.undermenu").stop(true, false).animate({height:'30px'}, { duration: 200, queue: true});
$("ul.undermenu").animate({width:viewportWidth}, { duration: 500, queue: true});
window.setTimeout(function () {
$('li.um').html('Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e5f0e1f0d5e7e0f3e0e6f8e0e6fcf6bbf6fabbe0fe">[email protected]</a> | Call: 12345678901 | Call: 01290923876');
}, 700);
$("li.um").fadeIn(200);
}
});
Fiddle (scroll down a few times to see the fading in/out effect of the text)