如何保持jQuery函数从移动元素一直到左边？

Question

我能够实现这里发布的解决方案（“位置：固定和绝对同时。如何？”）以使div元素与页面的其余部分水平移动，但保持垂直固定。 但是，此解决方案会导致所选元素一直移动到页面左侧（看起来是20px的边距）。 我还是javascript和jQuery的新手，但据我了解，以下内容：

$(window).scroll(function(){
var $this = $(this);
$('#homeheader').css('left', 20 - $this.scrollLeft());});

获取所选元素，并在用户滚动时影响元素的CSS，使其从左侧开始的位置成为由20px边距调整的当前滚动条位置的某个函数。 如果这是正确的？ 如果是这样，任何人都可以想到一种方法，我可以改变它，以便不是将所选元素一直移动到窗口的左侧，我们只将它移动到最左边作为我的身体元素的默认CSS位置HTML文档（如下所示）？

body {font-size:100%;
width: 800px;
margin-top: 0px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;}

编辑：这是一个的jsfiddle （代码在这里 ），我提出来说明这个问题。 我的页面设计为当它以全屏或接近全屏模式显示时，＃homeheader元素由于其宽度而显示为水平居中，左右边距设置为自动。 随着页面越来越小，边距也会越来越大，直到它们完全消失并被20px的padding-left和padding-right设置替换。 所以在这一点上（当窗口足够小以至于边缘完全消失时），这就是jsfiddle显示的内容，代码似乎按预期工作，但是当窗口是完整大小时，JS会覆盖CSS并推送div在任何滚动动作时，元素一直向左（摆脱边缘）。

Answer 1

您需要处理两个事件才能使其正常工作。 首先是你非常接近的滚动事件。 您可能想要做的唯一事情是使用偏移量来获取基于文档​​的当前左侧位置值。

另一个尚未处理的事件是resize事件。 如果您不处理这个问题，那么一旦定义了左侧位置，您的元素（标题）将始终存在，无论用户是否调整窗口大小。

基本上这样的东西应该工作：

var headeroffset;
var header = $('#homeheader');

// handle scroll
$(window).scroll(function() {
    // auto when not defined
    if (headeroffset === undefined) {
        // capture offset for current screen size
        headeroffset = header.offset();
    }
    // calculate offset
    var leftOffset = headeroffset.left - $(this).scrollLeft();
    // set left offset
    header.css('left', leftOffset);
});

// handle resize
$(window).resize(function() {
    // remove left setting
    // (this stops the element from being stuck after a resize event
    if (header.css('left') !== 'auto') {
        header.css('left', '');
        headeroffset = undefined;
    }
});

JSFiddle示例： http ： //jsfiddle.net/infiniteloops/ELCq7/6/

http://jsfiddle.net/infiniteloops/ELCq7/6/show

这种类型的效果可以完全用css完成，但我建议你看一下Steve Sanderson最近做的整页应用系列。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

举个例子，你可以这样做：

http://jsfiddle.net/infiniteloops/ELCq7/18/

Answer 2

尝试这个

$('#homeheader').css('left', parseInt($('body').css('margin-left')) -   $this.scrollLeft());});

我在这里做的只是用body的left-margin值替换20 。