Navbar is changed with scrolling

Question

Navbar is changed with scrolling

Navigation

#1 by (1 votes)

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 text "TEXT EXAMPLE" are smaller, but the image is not changed.

What you would like to do is scroll down, add text and only the image, but smaller (50% of the original)

Is it possible?

javascript twitter-bootstrap

asked by anonymous 04.11.2015 / 22:33

1 answer

Bring select on a line with 2 references verify if backend method is true and not client as well

score 1 · Answer 1

Assigning the scroll() function to the window object every time the scroll moves, it will be triggered by checking if the scrollTop() of the window is greater than 100, if it will add the classes that change the appearance of the elements, if 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;
}