Jquery-offsetLeftは右からスクロールでは機能しません

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：私はfiddle元を追加してい

.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; 
} 

。

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-フィドル：https://fiddle.jshell.net/j4v90rw4/2/