CSS:x轴上的固定位置,但不是y?
问题描述:
有没有办法只在x轴上固定位置?
Is there a way to fix a position on the x-axis only? So when a user scrolls up, the div tag will scroll up with it, but not side to side?
答
它是一个简单的技术使用脚本。您也可以查看演示。
Its a simple technique using the script also. You can check a demo here too.
JQuery
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + 15
//Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
});
});
CSS
#header {
top: 15px;
left: 15px;
position: absolute;
}
>更新 ;信用:@ PierredeLESPINAY
如所注释的,使脚本支持css中的更改,而不必在脚本中重新编码。您可以使用以下命令。
As commented, to make the script support the changes in the css without having to recode them in the script. You can use the following.
var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
$('#header').css({
'left': $(this).scrollLeft() + leftOffset //Use it later
});
});
演示:)