affix overlaps content

[bassjobsen]

In this situation:

<header style="height:200px;background-color:red;">
  <div id="affixlink" data-spy="affix" data-offset-top="182" style="background-    color:green;"><a href="#down">Down</a></div>
 </header>
 <div style="height:800px;background-color:yellow;">
 <a id="down"></a>Content
 </div>  

see: http://bootply.com/81402

I'm not sure this is an issue of Bootstrap, but i could not find an easing fix. See: http://stackoverflow.com/questions/18799688/bootstrap-affix-navbar-for-single-page-with-scrollspy-and-page-anchors/18834770

[cvrebert]

IIUC, this is suboptimal but expected behavior. It actually happens in the docs too, but we've added spacing there to compensate.

[shahariaazam]

@bassjobsen did you solve the problem?
I am also having the same problem.

[bassjobsen]

hi @shahariaazam,

Please see http://stackoverflow.com/a/18834770/1596547 for a solution which seems to works. I will have to change the heights to fit your needs.

Good luck.

NB i you could provide a bootply of your situation i will help you to find a solution

[shahariaazam]

@bassjobsen I tried to design a similar layout of http://purecss.io/layouts/blog/ with Bootstrap v3.0.0.
But it's not happening somehow. It would be great if you can see my bootply. Bootply link: http://bootply.com/82134

[mdo]

What exactly is the problem here? This looks like the expected behavior—you scroll past the point of affixing, the element gets affixed. Closing out until we get more information.