0

I use bootstrap ver 3.
When I'm scrolling down, I want my menu bar set to top of the page.

screenshot: enter image description here

My start page when loading show my logo in center & my menu bar in bottom of logo.
Height of page 500px
my menu cod:

<div class="navbar-inverse navbar-default navbar-static-top" role="navigation" > <!-- منو بالا -->
    <div class="container my-menubar">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <span class="sr-only">Toggle navigation</span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
            </button>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">صفحه اصلی</a></li>
                <li><a href="#about">محصولات</a></li>
                <li><a href="#contact">درباره ما</a></li>
                <li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> خدمات <span class="caret"></span></a>
                    <ul class="dropdown-menu my-menubar" role="menu">
                        <li><a href="#">خدمات 1</a></li>
                        <li><a href="#">خدمات 2</a></li>
                        <li><a href="#">خدمات 3</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse --> 
    </div>
    <!-- /container --> 
</div>

please watch below link :

http://chuckagency.com/wordpress-new/

i want create like this.

Web Developer
  • 53
  • 6
  • Your perfect solution Here. http://stackoverflow.com/questions/11983294/make-div-stick-to-bottom-of-browser-then-top-of-browser-on-scroll – HDP Aug 01 '14 at 08:38

3 Answers3

1

Add two attributes below class 

.navbar-static-top {
    top: 0px;
    position: fixed;
}
paulalexandru
  • 9,218
  • 7
  • 66
  • 94
Dinesh Mandaviya
  • 192
  • 5
1

You can use some javascript like the below to add a class to your menu once you have scrolled down enough.

var listval = $('.section-nav-bar-menu')[0].offsetTop;   

    $(document).scroll(function() {     

        var topval = $(document).scrollTop();         
            if(topval >= listval){  
               $('.section-nav-bar-menu').addClass('fixed');  
            } else {  
               $('.section-nav-bar-menu').removeClass('fixed');  
            }  

    });  

});

Then you can use CSS to fix the menu bar to the top of the page using the "fixed" class.

There are probably many different implementation of this code, so look around and see what works best for you...

swiss_blade
  • 541
  • 4
  • 19
0
$(window).scroll(function () {      

    if ($(window).scrollTop() >= 450) {
        if ($('.navbar-default').hasClass('navbar-static-top')){
            $('.navbar-default').removeClass('navbar-static-top');
            $('.navbar-default').addClass('navbar-fixed-top');
        }
    }
    else {
        if ($('.navbar-default').hasClass('navbar-fixed-top')){
            $('.navbar-default').addClass('navbar-static-top');
            $('.navbar-default').removeClass('navbar-fixed-top');
        }
    }

});
paulalexandru
  • 9,218
  • 7
  • 66
  • 94
  • dear paulalexandru. Thanks for your help. can you do this two asked: 1.When open in the laptop, the menu is Stick at the bottom of the page. when scroll down, stick top of the page 2. The same applies to mobile and beautifully displayed. you can see demo : http://goo.gl/MkLDiw – Web Developer Jul 31 '14 at 12:38
  • I've tested on your page and this code works perfectly as you want. – paulalexandru Aug 01 '14 at 08:40