Yii Framework Forum: Bootstrap - "floating" Navbar That Stays On-Screen? - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Bootstrap - "floating" Navbar That Stays On-Screen? Rate Topic: -----

#1 User is offline   Sage 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 14
  • Joined: 29-August 12
  • Location:California, USA

  Posted 10 January 2013 - 01:46 PM

On an app I am building now, I would like to have two navigation bars, I'll call them the "main nav" and "secondary nav". I will be using the BootMenu widget from the bootstrap extension.

Main nav will be fixed, full-width at the top of the page. Secondary nav will be page-width, just below the header div.

I would like the position of the secondary nav to be static until the user scrolls down. When the user scrolls to the point where the main nav "hits" the secondary nav as it moves down the page, the secondary nav should also begin moving down to stay on-page, resulting in the main nav being stacked on top of the secondary nav until the user scrolls up far enough to bring the header back into view.

For example, it would behave similar to this: http://liljosh.com/h...when-scrolling/

What is the best "Yii way" to accomplish this using the Bootstrap extension? Thanks.
0

#2 User is offline   Sage 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 14
  • Joined: 29-August 12
  • Location:California, USA

Posted 14 January 2013 - 07:06 PM

Almost have it working.

When I scroll down, the navbar moves the way I'd like it do, except it changes size. For some reason it shrinks width when the CSS class ".sticky" is added and it switches from "relative" to "fixed". So, at this point it seems like a CSS issue. Any tips for working this out?

Here is what I did:

1. Put this code in /js/floating-nav.js
function sticky_relocate() {
	var window_top = $(window).scrollTop();
	var div_top = $('#sticky-anchor').offset().top;
	if (window_top > div_top)
		$('#secondary-nav').addClass('sticky')
	else
		$('#secondary-nav').removeClass('sticky');
}
$(function() {
	$(window).scroll(sticky_relocate);
	sticky_relocate();
});


2. Added this views/layouts/main.php
<?php
    Yii::app()->clientScript->registerScriptFile(
        Yii::app()->baseUrl . '/js/floating-nav.js',
        CClientScript::POS_END
    );
?>


3. Here is the navbar code, also in views/layouts/main.php:
<div class="row-fluid" id="main-wrapper">
  <div class="span8 offset2">
  
  ...
  
    <div class="row-fuid">
        <div id="sticky-anchor"></div>
        <div id="secondary-nav">
        <?php
        $this->widget('bootstrap.widgets.TbNavbar', array(
           'type' => 'inverse',
           'fluid' => false,
           'fixed' => false,
           
        .....
        
              ),
            ),
          ),
        ));
        ?>
      </div>
    </div>
  </div>
</div>


4. Lastly, here is the relevant CSS:
.sticky {
    position: fixed;
    top: 0;
}

0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users