javascript - 如何防止 jQuery 函数将元素一直向左移动？

Question

我能够实现发布的解决方案 here ("position: fixed and absolute at the same time. HOW?") 让 div 元素随着页面的其余部分水平移动，但垂直保持固定。但是，此解决方案会导致所选元素一直移动到页面左侧(看起来有 20 像素的边距)。我还是 javascript 和 jQuery 的新手，但据我了解，以下内容:

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

获取选定的元素，并在用户滚动时影响元素的 CSS，使其从左侧开始的位置成为当前滚动条位置的函数，调整了 20px 边距。如果这是正确的？如果是这样，谁能想出一种方法来改变它，而不是将所选元素一直移动到窗口的左侧，我们只将它移动到 body 元素的默认 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 (代码 here )，我用来说明这个问题。我的页面设计为当它以全屏或接近全屏模式显示时，#homeheader 元素显示为水平居中，因为它的宽度和左右边距设置为自动。随着页面变得越来越小，边距也会越来越小，直到它们完全消失并被 20px 的 padding-left 和 padding-right 设置所取代。所以在这一点上(当窗口足够小以至于边距完全消失时)，这是 jsfiddle 显示的，代码似乎按预期工作，但是当窗口全尺寸时，JS 覆盖 CSS 并推送 div元素在任何滚动操作中一直向左(去掉边距)。

Answer 1

要使其正常工作，您需要处理两个事件。首先是您非常接近的滚动事件。您可能唯一想做的就是使用 offset根据文档获取当前左侧位置值。

另一个尚未处理的事件是 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/