Question

我想通过左/右箭头（在键盘上）或鼠标中键刷新左侧位置。现在左侧位置仅在我向下/向上滚动时才有效。

我的脚本很简单：

$(window).scroll(function() {
var scroll = $(window).scrollTop();

if(scroll >= 672) {
  $('.firm-row-th').addClass("stickyHeader");
}else {
  $('.firm-row-th').removeClass("stickyHeader");
}

if($('.stickyHeader')[0]) {
  $('.stickyHeader').css({ 'left': -$('.firm-container').scrollLeft() + "px" });
}
});

我的css：

.firm-container {
margin-left: 0px;
width: calc(100% - 8px);
white-space: nowrap;
border: 1px solid #222;
overflow-x: auto;
z-index: 10;
position: absolute;
background-color: #fff;
}
.firm-row {
display: table;
table-layout: fixed;
}
.firm-row-th {
display: table;
table-layout: fixed;
}

.stickyHeader {
position: fixed;
top:0;
}

我正在添加fiddle例如

在stickyheader开启时尝试向右滚动。您会看到stickyHeader未刷新。然后尝试向下滚动 - stickyheader将刷新。

Answer 1

那是因为你只是在窗口上听滚动事件，滚动向上滚动，而不是在左右滚动的.firm容器上。

像这样更新您的JS：

$(window).scroll(function() {
    handleScroll();
});

$('.firm-container').scroll(function() {
    handleScroll();
});

function handleScroll() {
var scroll = $(window).scrollTop();

    if(scroll >= 2) {
    $('.firm-row-th').addClass("stickyHeader");//.css({ 'left': -$('.firmy-container').scrollLeft() + "px" });
    }else {
    $('.firm-row-th').removeClass("stickyHeader");
    }

    if($('.stickyHeader')[0])
    {
    $('.stickyHeader').css({ 'left': -$('.firm-container').scrollLeft() + "px" });
    }
}

js-fiddle：https://fiddle.jshell.net/j4v90rw4/2/

Jquery-offsetLeft无法向右滚动

1 个答案: