1

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

我想将三个导航 div（“#header”、“#tabs”和“#footer”）修复到左侧视口（或者，使用“位置：固定；左侧：固定到 div“#helper”的 x 位置： 0; top: 0;") -- 但不修复 y。它们不能垂直固定。

我创建了一个工作 js，它强制 div 基于滚动重新定位，但它在真实页面中并不平滑（动态和图形元素太多） - 我希望它能够流畅地动画，或者模仿固定左和似乎根本没有重新定位。

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

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

感谢您的任何帮助！

4

3 回答 3

3

平滑动画示例：

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
}

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

你也可以用速度做一些花哨的东西，例如sin(x)用来设置速度

于 2012-08-21T19:33:29.547 回答
0

这是为查看这篇文章的人准备的——我最终选择了我最初放在jsFiddle中的解决方案，该解决方案使用简单的 javascript 来模仿固定的 x。

第一个答案中的 javascript 很重，而且有问题，第二个答案听起来不错，但在实践中不起作用。因此，我推荐来自 jsFiddle（如下）的 javascript 作为没有 javascript 库的固定 x 和流体 y 的最佳答案。它并不完美，延迟最小，但这是我找到的最佳答案。

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;
于 2013-01-12T02:40:06.147 回答
0

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

但这里有一个方法。

首先，您需要能够在 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 样式的位置值。
  • 将 div 样式的顶部值设置为OriginalY - OldY （<- 这可能因浏览器计算 pageOffset 值的方式而异，）
  • 将 div 样式的 Left 值设置为FixAtX

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

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

于 2012-08-21T20:09:08.373 回答