I recently implemented a code to create a logo animation inside my navigation bar that expands and contracts as I scroll, inspired by the functionality of the Wall Street Journal website. However, this implementation has caused some unintended side effects where both the logo and other elements inside the navigation bar seem to wiggle or vibrate.
Javascript:
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('#logo').stop().animate({height: "50px"},100);
$('#nav').css({height: "110px"});
}
else {
$('#logo').stop().animate({height: "70px"},100);
$('#nav').css({height: "130px"});
}
});
Cascading Style Sheets (CSS):
#logo {
height: 70px;
width: auto;
margin: auto;
display: block;
}
#nav{
display: block;
max-width: 100%;
height: 120px;
position: relative;
background-color: rgba(249,249,249,1);
font-family: MyriadPro-RegularImport;
}