CSS:x 轴上的固定位置而不是 y 轴？

Question

有没有办法只在 x 轴上固定一个位置？所以当用户向上滚动时，div 标签会随之向上滚动，但不会左右滚动？

Answer 1

这也是一种使用脚本的简单技术。您可以查看演示 here也是。

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 中的更改，而无需在脚本中重新编码。您可以使用以下内容。

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset //Use it later
    });
});

Demo :)