Question

我正在尝试创建一个固定的位置标题，但我无法以正常的纯CSS方式执行，因为我正在使用的网站已禁用浏览器滚动，完整网站位于可滚动的div中。

问题是当我在可滚动div中计算标题的偏移顶部时，IE（所有版本，甚至是Edge）的结果与Chrome不同，其中标题可以根据需要运行。

这是我的代码：

var $content = $('#content'),
    $contentWrapper = $('#content-wrapper'),
    $header = $('header'),
    otop = 0;

$($content).scroll(function (obj) {

    if ((navigator.userAgent.match(/msie|trident/i)) || (/Edge\/12./i.test(navigator.userAgent))) {
        otop = $content.scrollTop();
        //otop *= -1;
        console.log("IE", otop);
    } else {
        otop = $contentWrapper.offset().top;
        otop *= -1;
        console.log("ELSE", otop);
    }

    $header.css('top', otop);

    if (otop > 10) {
        $header.addClass("scrolled");
    } else {
        $header.removeClass("scrolled");
    }
});

CSS：

header {
    padding: 20px 0 0;
    background-size: contain;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    background-color: #e6e1dd;
    display: block;
    min-height: 126px;
}

#content-wrapper {
    position: relative;
}

#content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 2;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    background: #e6e1dd;
    box-shadow: rgba(0,0,0,.4) 0 0 15px;
}

HTML：

<div id="content">
    <div id="content-wrapper">
        <header>
            ...
        </header>
    </div>
</div>

我已经读过offset（）。top在IE中不起作用，但scrollTop（）在所有浏览器中返回0并且我没有设法找到任何其他替代品。我看过很多不同的堆栈溢出链接，到目前为止还没有任何工作，所以任何帮助都会非常感激。

jQuery offset（）。top为IE

0 个答案: