Bootstrap 3 Affix Header and Menu

Question

I have searched for and can't get the right solution

I got this far from the following post: Bootstrap. How to add multiple add affix attribute? using Multiple Affix attributes

Please can someone help me with two problems:

PROBLEM 1:

http://jsfiddle.net/Spiral57/b9xTs/

#affix1.affix {
    position: fixed; 
    background-color: #000;
    width: 100%;
    top: -10px; 
    z-index:1030;
}

#affix2.affix {
    position: fixed; 
    width: 100%;
    background-color: #000;
    top: 105px; 
    z-index:1030;
}

#affix3.affix {
    position: fixed; 
    width: 100%;
    background-color: #000;
    top: 155px; 
    z-index:1030;
}

@media (max-width: 767px) {
    #affix3.affix {
        position: fixed; 
        width: 100%;
        background-color: #000;
        top: 330px; 
        z-index:1030;
    }
}

I need the header, navbar and navwrapper to be fixed to the top, maintaining a BLACK background.

PROBLEM 2

http://jsfiddle.net/Spiral57/wnbFf/

#affix4.affix {
    position: fixed; 
    background-color: #fff;
    right: 15px;
    top: -10px; 
    z-index:1030;
}


#affix5.affix {
    position: fixed; 
    width: 100%;
    background-color: #fff;
    top: 105px; 
    z-index:1030;
}

#affix6.affix {
    position: fixed; 
    width: 99%;
    background-color: #fff;
    top: 155px; 
    z-index:1030;
}

@media (max-width: 767px) {
    #affix6.affix {
        position: fixed; 
        width: 92%;
        background-color: #fff;
        top: 330px; 
        z-index:1030;
    }
}

I need the header, navbar and navwrapper to be fixed to the top, maintaining a WHITE background. With this, I need the logo to remain on the right hand side.

Answer 1

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.