After playing around with this for over a week, eventually I decided to wrap all the content that I want to affix in a div, and affix the div. A lot less code, and works like a charm.
CSS:
#affix1.affix {
position: fixed;
background-color: #000;
width: 100%;
top: -10px;
left: 0;
z-index:1030;
}
#affix2.affix {
position: fixed;
background-color: #fff;
width: 100%;
top: -10px;
left: 0;
z-index:1030;
}
HTML:
<div class="black" id="affix1" data-spy="affix" data-offset-top="1">
<div class="page-header">
<div> <a href="index.html" title="">
<h1>
<img id="logotype" src="images/logo.png" alt="">
</h1>
</a>
</div>
</div>
<!--End Header-->
<!--Start Navigation-->
<nav class="navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li><a id="black" href="#">MENU</a></li>
<li><a id="black" href="#">MENU</a></li>
<li class="dropdown">
<a id="black" href="#" class="dropdown-toggle" data-toggle="drop down">MENU</b></a>
<ul class="dropdown-menu">
<li><a id="black" href="#">Action</a></li>
<li><a id="black" href="#">Another action</a></li>
<li><a id="black" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a id="black" href="#">Separated link</a></li>
<li><a id="black" href="#">One more separated link</a></li>
</ul>
</li>
<li><a id="black" href="#">MENU</a></li>
<li><a href="#"><img src="/menu.png"></a></li>
</ul>
</nav>
<!--End Navigation-->
<!--Navigation Image-->
<div class="navwrapper"><a>TEXT TEXT</a></div>
</div>
I hope this can help someone else.
BTW, it also works for floating right image, because the div that wraps the image is not floating right, so causes no problems.