[英]Jquery- offsetLeft doesn't work on scroll to right
I want to refresh left position on scroll by left/right arrow(on keybord) or middle mouse button. 我想通过向左/向右箭头(在键盘上)或鼠标中键刷新滚动条上的左位置。 Now left position is working only when i'm scrolling on down/up. 现在,仅当我向下/向上滚动时,左侧位置才起作用。
my script is simple: 我的脚本很简单:
$(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" });
}
});
My css: 我的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;
}
I am adding fiddle ex. 我加小提琴前。
Just try to scroll on right when stickyheader
is on. 启用stickyheader
时,只需尝试向右滚动即可。 You will see the stickyHeader
is not refreshed. 您将看到stickyHeader
没有刷新。 Then try to scroll down- stickyheader
will refresh. 然后尝试向下滚动stickyheader
将刷新。
That's because you are only listening to the scroll-event on the window, which scrolls up-don, but not on the .firm-container which scrolls left-right. 这是因为您只在听窗口上的滚动事件(向上滚动),而不在.firm-container上左右滚动。
Update your JS like this: 像这样更新您的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/ js-fiddle: https : //fiddle.jshell.net/j4v90rw4/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.