CODEWITHSUNDEEP
javascriptjquerycss
jkjmr6
jkjmr6

Reputation: 642

Make Logo Shrink into Navbar on scroll

I have a div whose height is bigger (120px vs the 75px navbar) than the navbar. Whenever someone starts scrolling I want the logo to transition to the same height as the navbar. I'm trying to toggle a CSS class with no luck, what am I overlooking? I'm using a Bootstrap navbar.

Here is the HTML for the fixed nav:

<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>

Here are the CSS classes:

#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;
}

Here is the jquery:

$(window).on("scroll touchmove", function () {
    $('#floating-logo').toggleClass('tiny', $(document).scrollTop() > 0);
});

I've even included a jsfiddle: https://jsfiddle.net/jkjmr6/2f4ofnsn/

Upvotes: 0

Views: 1651

Answers (4)

Trupti
Trupti

Reputation: 657

var scrollTop = jQuery(document).scrollTop();   
if (scrollTop > 0) {
    jQuery(".logo").css('width', '75px');
}
else {
    jQuery(".logo").css('width', '120px');
}

jQuery(window).resize(function() {
    var scrollTop = jQuery(document).scrollTop();   
    if (scrollTop > 0) {
        jQuery(".logo").css('width', '75px');
    }
    else {
        jQuery(".logo").css('width', '120px');
    }
});

jQuery(window).scroll(function() {
    var scrollTop = jQuery(document).scrollTop();   
    if (scrollTop > 0) {
        jQuery(".logo").css('width', '75px');
    }
    else {
        jQuery(".logo").css('width', '120px');
    }
});

Upvotes: -1

wadge
wadge

Reputation: 428

If it helps you could also use this to help you with the animation since you mentioned you'd like to transition

Upvotes: 0

Christian Bonato
Christian Bonato

Reputation: 1306

Almost there, although what you are trying to achieve is not clear to me. Your provided JSFiddle shows a logo that "bleeds" outside the navbar. Is it supposed to be like this?

As stated above, target the image : 

$(window).on("scroll touchmove", function () {
    $('#floating-logo img').toggleClass('tiny', $(document).scrollTop() > 0);
});

JSFiddle.

Upvotes: 1

cari
cari

Reputation: 2300

You need to shrink the img, not the div. Try with

.tiny img {
    height: 20px;
}

Upvotes: 1

Related Questions