Question

我能够实现发布here的解决方案（＆＃34;位置：固定和绝对同时。如何？＆＃34;）以使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（代码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/

Answer 2

试试这个

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

我在此处所做的只是将20替换为body的{{1}}值。

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

2 个答案: