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

possible duplicate of [How can I make a div stick to the top of the screen once it's been scrolled to?](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — Ciro Santilli OurBigBook.com, Dec 22 '14 at 11:30
sticky header creation with help of jquery and css. http://www.kvcodes.com/2017/03/jquery-simple-sticky-header-on-scroll/ — Kvvaradha, Mar 28 '17 at 02:49

score 11 · Accepted Answer · answered Jul 03 '14 at 05:24

11

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');
    }
});

answered Jul 03 '14 at 05:24

John

889
8
16

thankyou. I was looking forward to solve this entirely with BS. :) – Jul 03 '14 at 06:51
does this not cause some scroll bottleneck? – Miguel May 27 '15 at 10:36
Any scroll event listener causes a bottleneck, that's why you should always throttle or debounce those listeners. – Gaston Sanchez Jul 17 '15 at 02:25
is it possible that header-2 is invisible while header-1 is visible, after scrolling 500px of browser window header-2 will be visible? – Shiplu Feb 06 '17 at 10:01

score 4 · Answer 2 · answered Jul 03 '14 at 04:47

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'
    });
}

});

its helpful but i was looking for a bootstrap specific answer. thanks for the reply :) — , Jul 03 '14 at 06:50

score 2 · Answer 3 · answered Jul 03 '14 at 06:10

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

score 0 · Answer 4 · edited May 23 '17 at 12:17

0

<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

edited May 23 '17 at 12:17

Community

1
1

answered Jul 03 '14 at 04:43

TooJuniorToCode

566
1
5
15

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. – Jul 03 '14 at 04:46
@John try look something like this.. if i'm not mistaken with your problem... are you insists doing this with bootstrap only? http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to – TooJuniorToCode Jul 03 '14 at 04:58
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? !! – Jul 03 '14 at 05:09
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 – TooJuniorToCode Jul 03 '14 at 05:39
well thanks dude, will take your suggestion in consideration. ;) – Jul 03 '14 at 06:52

Sticky header after some scrolling?

4 Answers4