页面标题中的粘性div与页面内容重叠

Question

I have a "sticky" div that starts in an absolute position and then switches to fixed at top: 0 once the window begins to scroll (I am using it as a navigation bar), but I also have "in-page" links.

My problem is that the sticky overlaps the other content in the body, in other words the top 200px (the size of the navbar) become hidden (beneath the sticky navbar) as soon as they begin to scroll down.

Is this a CSS problem or a JavaScript problem? How can I fix it?

http://jsfiddle.net/b26g1ztu/

javascript:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

HTML:

<!--navigation with logos-->
<div id="sticky-anchor"></div>
<div id=sticky>
    <a href="#lccpost">
        <img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg">
    </a>
        </div>
<!--Articles-->

<!--Nav pics-->
<section>
    <div id=lcc1>
        <a name="lccpost"><img alt="lansing" src="https://pbs.twimg.com/profile_images/558329813782376448/H2cb-84q_reasonably_small.jpeg"></a>
    </div>
</section>
<!--titles-->
<section>
    <div id=submissions><h2>Submissions</h2></div>
<!--single submissions-->
    <div class=name>
        <h3>John Doe</h3>
    </div>
    <div class=subs>
        <a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Shelby%20Schueller.pdf" target=_blank>
            <img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
    </div>
    <div class=judgesub>
        <!--<a href="">
            <img src="pictures/PDF_Logo.jpg" /></a>-->
    </div>
<!---->
    <div class=name>
        <h3>Jane Doe</h3>
    </div>
    <div class=subs>
        <a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Sarah%20Spohn.pdf" target=_blank>
            <img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
    </div>
    <div class=judgesub>
        <!--<a href="">
            <img src="pictures/PDF_Logo.jpg" /></a>-->
    </div>
<!---->
    <div class=name>
        <h3>Jason Doe</h3>
    </div>
    <div class=subs>
        <a href="submissions/1.%20News%20Story/The%20Lookout_News%20Story_Jeremy%20Kohn.pdf" target=_blank>
            <img src="http://www.wolfson.org.uk/media/1187/pdf_icon.png" /></a>
    </div>
    <div class=judgesub>
        <!--<a href="">
            <img src="pictures/PDF_Logo.jpg" /></a>-->
    </div>

CSS:

body 
{
    background-color: RGB(95,0,0);  
}
#sticky
{
    position:absolute;
    top:150px;
    background-color: RGB(65,0,0);
    color:White;
    border-style:solid;
    border-color:RGB(255,215,0);
    padding: 5px;
    width: 500px;
    height: 150px;
    overflow: hidden;
    overflow-y: scroll;
    }

#sticky.stick {
    position: fixed;
    top: 0px;
    bottom:auto;
    z-index: 10000;
}

#lcc1
{
    position:absolute;
    top: 350px;
    left: 20px;
    }
#submissions
{
    position:absolute;
    top: 320px;
    left: 240px;
    color:White;
    }

.name
{
    position:relative;
    top:400px;
    left: 150px;
    color:White;
    }  

.subs
{
    display:inline-block;
    position:relative;
    top: 330px;
    left: 270px;
    border-style: dashed;
    border-color:Red;
    padding:5px;
    }

Answer 1

I think your problem is a bit JS and a bit CSS.

You're using JS/JQuery to toggle between two CSS classes and essentially toggling between absolute and fixed positioning. Further you are using top to make your decisions in JS, but they evaluate to different values when you are in absolute or fixed positioning.

Finally, i'd recommend that you either (a) just stick with fixed positioning and adjust the location (top/left) onscroll or (b) when you are in .stick mode add padding-top:300px to the body or margin-top:300px on body section:first-child