0

I want to create a website with 2 sticky elements on top of the page. A sticky header and a sticky toolbar. I am using bootstrap's Affix for the toolbar and sticky.js for the header.

If I use {topSpacing:0} for the sticky header, when it "sticks" it moves behind the sticky toolbar.

If I use {topSpacing:30} for the sticky header, when it "sticks" it positions its self very nicely for large screens, BUT: The only problem is that in smaller screens, where the toolbar changes height (becomes taller than 30px in order to fit all its contents inside) the sticky header moves again behind the sticky toolbar.

I want the sticky header to always be sticked below the sticky toolbar, even if the toolbar has a height of 0px or 10000px!

Is that possible?

Here is my code: 

//Sticky Top bar
$('#sp-top-bar').affix({
  offset: {
    top: 1,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

//Sticky Header
$(document).ready(function(){
    $("body.sticky-header").find('#sp-header').sticky({topSpacing:0})
});

Here is a link to the project: http://werstahl.ellevenacoustica.com

kazanakius
  • 40
  • 6

3 Answers3

0

Why not get the height dynamically? 

$("body.sticky-header #sp-header').sticky({topSpacing: $('#sp-top-bar).outerHeight()});
isherwood
  • 58,414
  • 16
  • 114
  • 157
0

Try setting topSpacing to $('#sp-top-bar').outerHeight(), so the top spacing will always be the #sp-top-bar height not matter what's the screen size

$(document).ready(function(){
    $("body.sticky-header").find('#sp-header').sticky({topSpacing:$('#sp-top-bar').outerHeight()})
});
AdminXVII
  • 1,319
  • 11
  • 22
0

Thank you both for your help!

Just for the record, this works:

$(document).ready(function(){
      $("body.sticky-header").find('#sp-header').sticky({topSpacing: $('#sp-top-bar').outerHeight()})
   });

The only strange thing happening, is that when I refresh using CTRL+f5 in mozilla, a gap between the 2 elements appears. When I refresh normaly (without Ctrl or by simply navigating through) the gap disappears. Any ideas on that?

kazanakius
  • 40
  • 6