Navbar is changed with scrolling

Asked

Viewed 141 times

0

I’m trying to get my navbar to change when I scroll down. So far, I have the following HTML code: 

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img src="img/portfolio/logopequeno.png"  style="display:inline" class="img-responsive">
            <a class="navbar-brand" style="display:inline" href="#page-top"> TEXTO EXEMPLO</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">COMO FUNCIONA</a>
                </li>
                <li class="page-scroll">
                    <a href="#about">ASSISTA</a>
                </li>
                <li class="page-scroll">
                    <a href="#contact">APOIE</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

And javascript: 

$(function() {
    $('body').on('click', '.page-scroll a', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

When I scroll down, the navbar and the text "EXAMPLE TEXT" get smaller, but the image is not changed.

What I would like to do is to do the scroll down, make the text disappear and get only the image, but smaller size (50% of the original)

It is possible?

javascript twitter-bootstrap

  • Create classes (e.g. .img-resposive-scrolldown) and add/remove in the elements that will be changed every time the scroll moves, checking its top attribute to validate.

  • Can you show me how to do it in the code I posted? I still don’t understand javascript very well

1 answer

1

Assigning the function scroll() to the window object every time the scroll moves it will be fired by checking whether the scrollTop() window is greater than 100, if it is will add the classes that change the appearance of the elements, if it will not remove.

$(window).scroll(function() {
    if($(window).scrollTop() > 100) {
        $('.img-resposive').addClass('img-resposive--scrolldown');
        $('.navbar-brand').addClass('navbar-brand--scrolldown');
    } else {
        $('.img-resposive').removeClass('img-resposive--scrolldown');
        $('.navbar-brand').removeClass('navbar-brand--scrolldown');
    }
});


.img-resposive--scrolldown {
    width: 20px;
}

.navbar-brand--scrolldown {
    display: none;
}

Browser other questions tagged javascript twitter-bootstrap

You are not signed in. Login or sign up in order to post.