jq吸顶效果



<!--吸顶-->
 <div id="xd" class="wl_dh" style='min-width:1200px;z-index:2000;width:100%;position: fixed;top:0;left:0;display:none;'>
<!--吸顶1-->
    <div class="wl_dhm">
        #if($!headertype==1)
            <div class="wl_dhml1_current" id="wl_dhml1" onclick="showintro(id)"><a href="/index">首页</a></div>
        #else
            <div class="wl_dhml1" id="wl_dhml1" onclick="showintro(id)"><a href="/index">首页</a></div>
        #end
        #if($!headertype==2)
            <div class="wl_dhml1_current" id="wl_dhml2" onclick="showintro(id)">
                <a href="/cargo/search">货源信息</a>
            </div>
        #else
            <div class="wl_dhml1" id="wl_dhml2" onclick="showintro(id)">
                <a  href="/cargo/search">货源信息</a>
            </div>
        #end
        #if($!headertype==3)
            <div class="wl_dhml1_current" id="wl_dhml2" onclick="showintro(id)">
                <a href="/docking/list">车源信息</a>
            </div>
        #else
            <div class="wl_dhml1" id="wl_dhml2" onclick="showintro(id)">
                <a href="/docking/list">车源信息</a>
            </div>
        #end
        #if($!headertype==4)
        <div class="wl_dhml1_current" id="wl_dhml3" onclick="showintro(id)">
            <a href='javascript:void(0);' onclick="verifyRole_click('/cargo/toadd')">发布货源</a>
        </div>
        #else
        <div class="wl_dhml1" id="wl_dhml3" onclick="showintro(id)">
            <a href='javascript:void(0);' onclick="verifyRole_click('/cargo/toadd')">发布货源</a>
        </div>
        #end
        #if($!headertype==7)
        <div class="wl_dhml1_current no_right" id="wl_dhml4" onclick="showintro(id)">
            <a target="_top" href="/ns/info">关于我们</a>
        </div>
        #else
        <div class="wl_dhml1 no_right" id="wl_dhml4" onclick="showintro(id)" >
            <a target="_top" href="/ns/info">关于我们</a>
        </div>
        #end
    </div>         
</div> 
<!--吸顶结束-->

.wl_dh{
    min-width:1200px;
    height: 47px;
    width: 100%;
    float: left;
    background: #2794EF;
}
.wl_dhm{
    width: 1200px;
    height: 100%;
    margin: 0px auto;
}

.wl_dhml1 a{
    width: 214px;
    height: 47px;
    line-height: 47px;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    text-align: center;
    float: left;
    margin-right: 24px;
}
.wl_dhml1 a:hover{
    width: 214px;
    height: 47px;
    line-height: 47px;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    text-align: center;
    float: left;
    background: #FA9D2B;
    text-decoration:none;
    margin-right: 24px;
}
.wl_dhml1_current a:hover{width: 214px; color:#fff;text-decoration:none;display:block;}
.wl_dhml1_current a{
    width: 214px;
    height: 47px;
    line-height: 47px;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    text-align: center;
    float: left;
    background: #FA9D2B;
    text-decoration:none;
    margin-right: 24px;
}
.no_right{
    margin-right: 0px;
}
.no_right a{
    margin-right: 0px;
}
.no_right a:hover{
    margin-right: 0px;
}
.wl_dhml1n a img{
    float:right;
    width:13px;
    margin-right:6px;
    margin-top:24px;
}
.wl_dhmr {
    width: 130px;
    height: 100%;
    line-height: 56px;
    float: left;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    /*text-indent: 36px;*/
    /*background: url(../images/uesr.png) 0px center no-repeat;*/
}
.wl_dhml1n{
    width:150px;
    float:right;
    margin-right:30px;
}
.wl_dhmr a{color:#fff;}
.wl_dhmr a:hover{color:#fff;text-decoration:none;}
 .wl_dhmr_curr {width: 126px;
    height: 100%;
    line-height: 40px;
    float: right;
    vertical-align: middle;
    color: white;
    font-size: 18px;
    text-indent: 45px;
    background: #FA9D2B url(../images/user_c.png) 11px center no-repeat;} 
.wl_dhmr_curr a{color:#fff;}      
.wl_topmr .join{font-size:14px;background-color:#fa9d2b;float:left;}

第一次写的竟然在ie8(含)以下不兼容,没有显示出来

$(function(){
    var $xiding = $("#xd");
    $(window).on("scroll",function(){
        var $this = $(this);
        var st = $this.scrollTop();
        if(st>115){
            $xiding.stop(true,true).show();    //#xiding是要显示的DIV
        }  else {
            $xiding.stop(true,true).hide();
        }
    });
    
});

以下是ie7(含)以下不显示,很想知道为什么,但是自己现已有的东西理解不了,可能是自己别的代码影响,自己的小demo在7兼容

$(function(){
$(document).scroll(function(){
var $menu = $("#xd");
if($(document).scrollTop()>=116){
$menu.show();
}
else{
$menu.hide();
}
});

});

还有一种方法节约很多代码,当滚动的高度达到某值,就会固定在某处,在ie7(含)不兼容

//车源信息货源信息:吸顶2,3效果
$(window).scroll(function(){
    // 获得窗口滚动上去的距离
    var ling = $(document).scrollTop();
    // 在标题栏显示滚动的距离,不需要注释掉
    //document.title = ling;
    // 如果滚动距离大于600的时候让滚动框出来
    if(ling > 262){// 滚屏距离大于某个值时处理
        $('.hyxxi_contentmlt').css({
            position:'fixed',
            top:'47px',
            width:'1200px'
        });
     }
    if(ling > 262){
        $('.route0110').css({
            position:'fixed',
            top:'90px',
        }); 
     }
    if(ling > 280){
        $('.con_dj .con_2 .route').css({
            position:'fixed',
            top:'88px',
            marginTop:'20px',
        }); 
     }
     else{
        $('.hyxxi_contentmlt,.route').css({position:'static'});// 复位
     }
   
});