javascript - 将当前 margin 值添加到另一个值

Question

我的问题类似于:How to increase/decrease current margin at a number by jquery?但是我无法调整解决方案以匹配我的代码。我不断收到错误。

我的 CSS 定义了带有 -82px margin-top 的 $logo 变量。在我下面的 JS 中，margin-top 值在滚动时被调整，但它假设 margin-top 的起始值为 0。我怎么说它的 -82px？

这是故障的 jsfiddle:http://jsfiddle.net/5DAa9/小心向下滚动，您会注意到框跳动。

var $logo = $('.logo.abbr');
var windowScroll;
var $curValue = $( '.logo.abbr' ).css( "margin-top" );

    // Functional parallaxing calculations
    function slidingTitle() {

        //Get scroll position of window
        windowScroll = $(this).scrollTop();

        //Slow scroll of .logo and fade it out
        $logo.css({
            'margin-top' : ($curValue-(windowScroll/3)+"px") // Assuming this is the line I need to change??
        });

    }

Answer 1

这是一个快速修复...

windowScroll = $(this).scrollTop()+250;

我不知道为什么会这样。我会继续四处寻找，看看我是否能弄清楚，但这在这里对我有用

http://jsfiddle.net/5DAa9/1/

编辑:

我找到问题了!!

windowScroll = $(this).scrollTop(); 如果页面位于顶部，此行将返回 0。您已将滚动前的边距设置为 -82px，以便在第一次滚动时被删除并设置回 0 或滚动除以 3 的任何值。所以您想要进行该计算，然后再次减去 82 像素以保持在“同一个地方”或防止跳跃。

$logo.css({
'margin-top' : -(windowScroll/3)-82+"px"
});

这是一个丑陋的修复程序，但事情就是这样。我假设缩放 scrollTop 返回的 250 等于 82px。这是一个更新的 fiddle :http://jsfiddle.net/5DAa9/3/