Sticky title after scrolling?

Question

Okay here is an example of what I'm trying to ask, usatoday navigation bar.

I am using bootstrap affix. here is my code

<div class="header"> <div class="header-1"> <h1>this is some logo</h1> </div> <div class="header-2"> <h3>this is some heading</h3> </div> </div> <div class="content" style="height:2500px;"> </div> <div class="footer"> this is a footer </div> 

Javascript

 $('.header-2').affix({ }); 

how can I get div header-2 snap at the top (when there is scrolling, and div header-2 just reaches the top position) from the site I mentioned earlier?

I would like to see header-1 and header-2 , but some scrolls should hide header-1 and insert header-2 at the very top.

thanks

Answer 1

See Jsfiddle

you can check the position of the slider and add a class accordingly

 $(window).scroll(function () { if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){ $('#header-2').addClass('posi'); } else if ($(window).scrollTop() == 0){ $('#header-2').removeClass('posi'); } }); 

Answer 2

use jquery in this example http://jsfiddle.net/5n5MA/2/

 var fixmeTop = $('.fixme').offset().top; // Get initial position $(window).scroll(function() { // Assign scroll event listener var currentScroll = $(window).scrollTop(); // Get current position if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it $('.fixme').css({ position: 'fixed', top: '0', left: '0' }); } else { // Make it static if you scroll above $('.fixme').css({ position: 'static' }); } 

});

Answer 3

Loaded answer using Bootstrap.affix()

 $('.header-2').affix({ offset: { top: function () { return (this.top = $(".header-2").offset().top); } } }); 

It also requires CSS for fixed positioning (see Docs ).

The affix plugin toggles between three classes, each representing a specific state: .affix, .affix-top, and .affix-bottom. You need the styles yourself for these classes (regardless of this plugin) to handle the actual positions.

 .header-2.affix { top: 0; } 

Working example in Bootply: http://www.bootply.com/S03RlcT0z0

Answer 4

 <style> .header { top: 0%; left: 0%; width: 100%; position:fixed; } </style> 

Sorry, you did not carefully study your problem.

It may help you. Fixed header and Bootstrap Affix / Scrollspy problem - don't skip to fix location