如何控制页面上的#id链接？

Question

This FIDDLE will explain more than my words

How to avoid hidden Title when click on Link id 2 , Link id 3 and Link id 4 ?

PS: Please if anyone have a better Name for this question, please help, my English is not that good!

<header id="header">
   header
</header>

<div class="catalog">
    <div class="col1">
       <ul>
           <li><a href="#id1">Link id 1</a></li>
           <li><a href="#id2">Link id 2</a></li>
           <li><a href="#id3">Link id 3</a></li>
           <li><a href="#id4">Link id 4</a></li>
           <li><a href="#id5">Link id 5</a></li>

       </ul>
    </div>
    <div class="col_alternativ"></div>
    <div class="col2">
        <div id="id1" class="item">
            <h2>Link id 1</h2>            
        </div>
        <div id="id2" class="item">
            <h2>Link id 2</h2>            
        </div>
        <div id="id3" class="item">
            <h2>Link id 3</h2>            
        </div>
        <div id="id4" class="item">
            <h2>Link id 4</h2>            
        </div>
        <div id="id5" class="item">
            <h2>Link id 5</h2>            
        </div>
    </div>
</div>


$(window).scroll(function() {    
                var newValue = {opacity : 100}
                var scroll = $(window).scrollTop();
                if (scroll >= 100) {
                    $("#header").addClass("stablemenu").animate(newValue, 1000);
                    $(".col1").addClass("stable_col1").animate(newValue, 1000);
                    $(".col_alternativ").css({"display":"inline-block"});
                } else {
                    $("#header").removeClass("stablemenu");
                    $(".col1").removeClass("stable_col1").animate(newValue, 1000);
                    $(".col_alternativ").css({"display":"none"});
                }
            });

Answer 1

I was able to do what you wanted... I think. See here: http://jsfiddle.net/wilsonjonash/tdz3H/8/

Edit: Here's the code

<header id="header">
   header
</header>

<div class="catalog">
    <div class="col1">
       <ul>
           <li><a href="#id1">Link id 1</a></li>
           <li><a href="#id2">Link id 2</a></li>
           <li><a href="#id3">Link id 3</a></li>
           <li><a href="#id4">Link id 4</a></li>
           <li><a href="#id5">Link id 5</a></li>

       </ul>
    </div>
    <div class="col_alternativ"></div>
    <div class="col2">
        <div class="item">
            <div id="id1" class="hederid"></div>
            <h2>Link id 1</h2>            
        </div>
        <div class="item">
            <div id="id2" class="hederid"></div>
            <h2>Link id 2</h2>            
        </div>
        <div class="item">
            <div id="id3" class="hederid"></div>
            <h2 id="id3">Link id 3</h2>            
        </div>
        <div class="item">
            <div id="id4" class="hederid"></div>
            <h2>Link id 4</h2>            
        </div>
        <div class="item">
            <div id="id5" class="hederid"></div>
            <h2>Link id 5</h2>            
        </div>
    </div>
</div>

CSS:

#header {
    width: 100%;
    height: 100px;
    background-color: red;
}
.stablemenu {
    position: fixed;
    top: 0px;
    left:0px;
    z-index: 2;
    background-color: yellow !important;
}
.catalog {
    display: block;
    width: 100%;
    margin-top: 40px;
}
.catalog .col1 {
    display: inline-block;
    border: 1px solid #ccc;
    width: 25%;
    height: auto;
    padding: 1%;
    margin-right: 1%;
}
.catalog .col_alternativ {
    border: 1px solid #fff;
    width: 25%;
    height: auto;
    padding: 1%;
    margin-right: 1%;
    display: none;
}
.stable_col1 {
    position: fixed;
    top: 140px;
    left: 0px;
}
.catalog .col2 {
    display: inline-block;
    width: 70%;
    height: auto;
    vertical-align: top;
}
.item {
    border: 1px solid #ccc;
    width: auto;
    height: 300px;
    margin-bottom: 40px;
    position: relative;
}
.item .hederid {
    position: absolute;
    background: #ccc;
    width: 20px;
    height: 20px;
    left: 0px;
    top: -140px;
}

JavaScript:

$(window).scroll(function() {    
    var newValue = {opacity : 100}
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("#header").addClass("stablemenu").animate(newValue, 1000);
        $(".col1").addClass("stable_col1").animate(newValue, 1000);
        $(".col_alternativ").css({"display":"inline-block"});
        $('.col2').css('margin-top','100px');
        //$("#topbar").show().animate(newValue, 1000);
    } else {
        $("#header").removeClass("stablemenu");
        $(".col1").removeClass("stable_col1").animate(newValue, 1000);
        $(".col_alternativ").css({"display":"none"});
        $('.col2').css('margin-top','0');
    }
});