固定div保持水平固定

Question

以下是用户滚动到屏幕顶部时将div修复到屏幕顶部的代码。

但是，在我的浏览器中，如果用户向左或向右滚动，则栏会保持固定在顶部但滚动。我希望这个酒吧保持不变，内容已经结束了。

以下是jfidddle

以下是代码：

$(function(){
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyalias').css('display', 'block');
            } else {
                    $('#stickyheader').css({position: 'static', top: '0px'});
                    $('#stickyalias').css('display', 'none');
            }
    });
});

Answer 1

关键部分是left:-$(window).scrollLeft()

DEMO

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px',
                left: -$(window).scrollLeft()
            });
            $('#stickyalias').css('display', 'block');
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#stickyalias').css('display', 'none');
        }
    });
});