Sticky header after some scrolling?

Question

okay here's an example of what i am trying to ask, the nav bar of usatoday.

I'm using bootstrap affix. here's 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 make the div header-2 to be fixed on the top, (when there is some scrolling and the div header-2 just reach the top position) as of the site I've mentioned earlier?

I would love to see the header-1 and header-2, but some scrolling should hide header-1 and stick header-2 to the top most.

thanks

Infrequent

possible duplicate of How can I make a div stick to the top of the screen once it's been scrolled to? – Handbill

sticky header creation with help of jquery and css. kvcodes.com/2017/03/jquery-simple-sticky-header-on-scroll – Sennacherib

Answer 1

See this Jsfiddle

you can check the position of the slider and add 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');
    }
});

Volva

thankyou. I was looking forward to solve this entirely with BS. :) – Infrequent

does this not cause some scroll bottleneck? – Swaine

Any scroll event listener causes a bottleneck, that's why you should always throttle or debounce those listeners. – Lakshmi

is it possible that header-2 is invisible while header-1 is visible, after scrolling 500px of browser window header-2 will be visible? – Gazpacho

Answer 2

use jquery look at 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'
    });
}

});

Jackstraws

its helpful but i was looking for a bootstrap specific answer. thanks for the reply :) – Infrequent

Answer 3

Bootstrapped answer using Bootstrap.affix()

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

This also needs CSS for the fixed positioning (see the Docs).

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

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

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

Tripterous

Answer 4

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

I'm sorry didnt look at your problem carefully.

This may helps you Issue with Fixed Header and Bootstrap Affix / Scrollspy - Not jumping to correct location

Explicate

I would love to see the header-1 and header-2, but some scrolling should hide header-1 and stick header-2 on the top most. – Infrequent

@Volva try look something like this.. if i'm not mistaken with your problem... are you insists doing this with bootstrap only? #1216614 – Explicate

well there's affix already on bootstrap, i would be happy if the job get done just using BS. why need to put the browser on trouble plus serving another script if its already there on BS? !! – Infrequent

I upvoted you because you deserve it :) Dont rely too much on BS, yes they are good, but they will make you lazy like me :D – Explicate

well thanks dude, will take your suggestion in consideration. ;) – Infrequent