Reducing the height of the navigation bar when user scrolls the page

Question

I want to add a navigation bar which is initially long in height. and when the user scrolls the height reduces and the logo becomes small. I am using Bootstrap and my code is displayed as shown below.

Can someone please help me edit the code so i can reduce height of the navigation bar when scrolling the page.

                <div class="navbar-header">
                    <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>
                    <a class="navbar-brand" href="#">project a</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">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul></li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

This will help you achieve what you want.

jsFiddle

$(function(){
    $('#navigation-bar').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('#navigation-bar');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px'
            }, 600);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'100px'
            }, 600);
        }  
    }
});

this is from the question here

Update

Based on the bootstrap structure

I have written the code . Check this out jsFiddle

HTH.

edited May 23 '17 at 10:26

Community

1
1

answered May 27 '14 at 19:23

Venkateshwaran Selvaraj

1,745
8
30
60

Thanks, but how can i add an image when its height is great and then replace it with text when the height is less ? – Illep May 27 '14 at 19:43
THis doesn;t work. When i add the code to main.gsp it doesn't reduce the height of the nav bar. – Illep May 27 '14 at 19:53
To reduce the image size based on the container div, do not apply a width in the image tag. set your css to `max-width:100%; max-height:100%;` – Venkateshwaran Selvaraj May 27 '14 at 19:55
I tried to add it to the main.gsp page, but nothing works. Any clue? – Illep May 27 '14 at 20:10

Reducing the height of the navigation bar when user scrolls the page

1 Answers1