My design includes a div with a height of 120px, larger than the 75px navbar. When scrolling begins, I want the logo to transition to match the height of the navbar. Despite my efforts to toggle a CSS class, I am unable to achieve the desired effect. What could I be missing? The navigation bar is based on Bootstrap.
The HTML for the fixed nav section is as follows:
<div class="navbar-header">
<button class="navbar-toggle btn btn-default" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">
<div id="floating-logo">Logo</div>
</a>
</div>
Below are the CSS classes used:
#floating-logo {
margin: -15px 50px 0 0;
background-color: #FF9009;
height: 120px;
color: #FFF;
line-height: 120px;
width: 190px;
text-align: center;
padding: 0 7px;
}
.tiny{
height: 75px;
}
The jquery script being utilized is:
$(window).on("scroll touchmove", function () {
$('#floating-logo').toggleClass('tiny', $(document).scrollTop() > 0);
});
A live demonstration can be found in this jsfiddle link: https://jsfiddle.net/jkjmr6/2f4ofnsn/