Question

我正在修改脚本标题并固定右侧的scroolbar想要使用。就像facebook一样。固定是好的scroolbar和标题，但问题是当我在页面scroolbar scrool下来自动走右边我不知道为什么！检查我的演示

我希望它固定在黑色div.Header 40px高度.. !!

这是JSfiddle中的演示这是我的 Javascript代码：

$(document).ready(function() {
$(window).scroll(function () {
    var threshold = 100;
    if ($(window).scrollTop() >= 5)
        $('.ksmsg').addClass('fixed');
    else
        $('.ksmsg').removeClass('fixed');
});
});

这是我的 HTML CODE ：

<div class="globalHeader"><div class="globalHader-in"></div></div>
<div class="global_container"><div class="container">
    <div class="ksmsl"></div>
    <div class="ksmort"></div>
    <div class="ksmsg"></div>


</div></div>

以及 CSS代码：

body{
   margin:0px;
    padding:0px;

}
.globalHeader {
    width:100%;
    height:40px;
    position:fixed;
    background-color:#2a3542;
    z-index:99999;
    }
.globalheader-in {
    width:981px;
    height:40px;
    margin-left:auto;
    margin-right:auto;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    }
.global_container{
    clear:both;
    width:981px;
    height: 1000px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
    position:relative;
    top:40px;
    background-color:#f8f8f8;
    }
.container{
    float:left;
    width:981px;
    height:auto;

    }
.ksmsl{
    float:left;
    width:220px;
    height:auto;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;

    }
.ksmsg{
    float:right;
    width:199px;
    height:500px;

    background-color:#000;
    border-top:1px solid red;

    }
.fixed {
   position:fixed;
   top:50px;

   float:right;


}
.ksmort{
    float:left;
    width:560px;
    height:auto;
    border-left:1px solid #d8dbdf;
    border-right:1px solid #d8dbdf;
    border-bottom:1px solid #d8dbdf;
    }

Answer 1

将float:right;上的.ksmsg.fixed更改为margin-left:782px;。

.ksmsg.fixed {
   position:fixed;
   margin-left:782px;
   top:40px;
}

http://jsfiddle.net/g3p2U/12/

Jquery和css固定标题和固定右滚动条

1 个答案: