Javascript Jquery-offsetLeft不';不能向右滚动
我想通过左/右箭头(在键盘上)或鼠标中键刷新滚动条上的左位置。 现在只有在向下/向上滚动时,左位置才起作用 我的脚本很简单:Javascript Jquery-offsetLeft不';不能向右滚动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想通过左/右箭头(在键盘上)或鼠标中键刷新滚动条上的左位置。 现在只有在向下/向上滚动时,左位置才起作用 我的脚本很简单: $(window).scroll(function() { var scroll = $(window).scrollTop(); if(scroll >= 672) { $('.firm-row-th').addClass("stickyHeader"); }else { $('.firm-row-th').removeClass("stickyHead
$(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;
}
我加上了ex
只要在
stickyheader
打开时向右滚动即可。您将看到,stickyHeader
未刷新。然后尝试向下滚动-stickyheader
将刷新。这是因为您只在窗口上收听滚动事件,该窗口会向上滚动,但不会在左右滚动的.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小提琴:哦。。。这么简单。谢谢:)