Question

我到处寻找，到目前为止还没有找到一个非jQuery js来处理这个问题。我想避免使用库来完成这一个简单的任务。

我想将三个导航div（“＃header”，“＃tarbs”和“#footer”）修复为视口左侧（或者替换为“#helper”的x位置，其中“position：fixed” ; left：0; top：0;“） - 但不能修复y。它们不能垂直固定。

我已经创建了一个工作js，强制div基于滚动重新定位，但它在实际页面中不平滑（动态和图形元素太多） - 我希望它能够平滑地动画，或者模仿修复-left并且根本不会重新定位。

任何可以指点或快速编写脚本，或查看和修改我制作的脚本的人？我注意到人们倾向于问为什么没有使用明显的解决方案而不是回答问题...我很乐意回答，但更愿意帮助解决实际问题。

这是一个有问题的jsFiddle：http://jsfiddle.net/BMZvt/6/

感谢您的帮助！

Answer 1

平滑动画示例：

var box = document.getElementById('box');

var moveTo = function(obj, target) {
    // start position
    // you should obtain it from obj.style
    var cpos = {
        x: 0,
        y: 0
    }        
    var iv = setInterval(function(){
        cpos.x += (target.x - cpos.x) * 0.3; // 0.3 is speed
        cpos.y += (target.y - cpos.y) * 0.3; // 0.3 is speed
        obj.style.left = Math.floor(cpos.x) + 'px';
        obj.style.top = Math.floor(cpos.y) + 'px';
        var dist = Math.abs(cpos.y - target.y); // distance (x+y) from destination
        dist += Math.abs(cpos.x - target.x); // < 1 = object reached the destination

        if(dist < 1) { // here we are checking is box get to the destination 
           clearInterval(iv);
        }
    }, 30); // this is also the speed
}

box.onclick = function(){
    moveTo(box, {x: 90, y: 75}); // fire this function to move box to specified point
}

演示：http://jsfiddle.net/Qwqf6/5/

您的脚本是您的工作，但这是如何解决动画问题的快速入门

您还可以使用速度做一些奇特的事情，例如使用sin(x)来设置速度

演示＃2 http://jsfiddle.net/Qwqf6/6/（非常顺利）

此处完整脚本 https://gist.github.com/3419179

Answer 2

我认为没有直接的方法可以做到这一点......

但这是一种方式。

首先，当window.onscroll事件发生时，您需要能够检测滚动的方向。您可以通过在滚动事件发生时将当前页面偏移量与新获取的页面偏移量进行比较来完成此操作。（http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction）

现在假设你知道滚动的方向，你想根据滚动的方向改变div的样式。

让 FixAtX 为您想要修复div的x坐标的值。设 OriginalY 为div的y坐标。此外，无论何时滚动，无论方向如何，您都要记住页面偏移X和Y.我们称之为 OldX 和 OldY

如果垂直滚动：

将div的样式的位置值设置为绝对值。
将div的样式的最高值设置为 OriginalY
将div的样式的左值设为 OldX + FixAtX

如果水平滚动：

设置要修复div的样式的位置值。
将divs'样式的最高值设置为 OriginalY - OldY （＆lt; - 这可能会有所不同，具体取决于浏览器如何计算pageOffset值），
将div的样式的Left值设置为 FixAtX

我认为这应该有用...... 由于您只是使用浏览器的渲染进行定位，因此它应该非常流畅！

希望我能正确理解这个问题。

Answer 3

这是针对那些观看这篇文章的人 - 我最后在jsFiddle中使用简单的javascript模仿固定x的解决方案。

第一个答案中的javascript非常庞大，而且第二个答案听起来不错，但第二个答案听起来不错，但在实践中并没有起作用。所以，我推荐jsFiddle（下面）中的javascript作为修复x和流体y的最佳答案，没有javascript库。它并不完美，延迟时间最短，但却是我找到的最佳答案。

function fixLeft() {

            function getScrollX() {
                var x = 0, y = 0;
                if( typeof( window.pageYOffset ) == 'number' ) {
                    x = window.pageXOffset;
                } else if( document.body && ( document.body.scrollLeft) ) {
                    x = document.body.scrollLeft;
                } else if( document.documentElement && ( document.documentElement.scrollLeft) ) {
                    x = document.documentElement.scrollLeft;
                }
                return [x];
            }

            var x = getScrollX();
            var x = x[0];

        // have to get and add horizontal scroll position px
        document.getElementById('header').style.left = x + "px";
        document.getElementById('tabs').style.left = x + "px";
        document.getElementById('footer').style.left = x + "px";
    }

    window.onscroll = fixLeft;

javascript（但不是jQuery请）在x轴上固定位置但不是y？

3 个答案: