How to resize navbar logo on scroll down

Question

So I have this navbar with a logo on it. I would like the logo to be big when the user is in the header section of the page, but then shrink when the user scrolls down. Any

Answer 1

You can achieve this using JQuery-

$(document).scroll(function() {
    $('#navbar').css({width: $(this).scrollTop() > 100? "50%":"100%"});
});

explanation- When scrolling- get the navbar element, change it's CSS as follows: if scrollTop() < 100 (we're not at the top of the page) - change the width to 50%. Otherwise change it to 100% (regular)