javascript - jquery 在 Chrome 中平滑滚动而不是在 Internet Explorer 中

Question

我正在尝试在页面顶部设置一个固定的标题。所以当用户向下滚动时，标题保持在顶部。然而，这仅适用于平滑滚动的 Chrome、FireFox 和 Opera。

如果你看看下面的代码。使用 IE 和谷歌浏览器打开。你会看到不同之处! header 必须保留在包装器中。

Example Code

我想知道如何在 div 元素内重新定位对象时使滚动平滑，当设置为 absolute 以保持它 float 在框的顶部时。

HTML:

<div id="wrapper">
    <header>
        <h2>Title Header</h2>        
    </header>
    Content page
</div>

CSS:

#wrapper{
    height:200px;
    overflow-y:scroll;
    position:relative;
}

#wrapper > p {
    position: absolute;
    z-index: 0;

}
#wrapper header {
    background-color:#ccc;
    position: absolute;
    z-index: 10;
    display: block;
    top: 0px;
    padding:10px;
    width: 100%;
}

#wrapper header h2 { margin:0 }

Javascript:

$(function(){
    $('#wrapper').scroll(function(e){
         $('header').css('top',parseInt($('#wrapper').scrollTop())+'px');
    });
 });

Answer 1

我宁愿使用这个 CSS 并删除 JS 以实现跨浏览器兼容性:

// same CSS...
#wrapper p {
    margin-top: 50px; //no positioning just a top margin
    z-index: 0;

}
#wrapper header {
    background-color:#ccc;
    position: fixed; // from absolute to fixed
    z-index: 10;
    display: block;
    top: 0px;
    padding:10px;
    width: 100%;
}
//same CSS...

Demo.