Question

在页面加载时，我有一个大的徽标（有意）与顶部导航栏重叠。我的目标是缩小它并在滚动时将其移动到导航栏中，在那里它变成一个固定元素（当滚动回到顶部时弹出回到更大的版本）。我目前的代码部分实现了这一目标。

问题是执行不一致取决于滚动速度。在以慢速向下滚动时，一切都按预期工作。但是快速向下滚动会导致徽标在缩小到足够缩小之前跳到最终的导航栏位置。徽标向上移动19px（从27到8），从开始到结束应该从（300 x 111）缩小到（100 x 37）。

的jQuery

/* Resize logo */
var scroll_pos = 0;
$(window).scroll(function() {
    scroll_pos = $(this).scrollTop();
    if ($(window).scrollTop() <= 19) {
        $(".logo").width(300 - 10.5263 * scroll_pos).height(111 - 3.8947 * scroll_pos);
    }
});

我乘以scoll_pos乘以的标量值是（300 - 100）/ 19和（111 - 37）/ 19.

我的猜测是，在有机会更新大小之前，快速滚动会使函数退出条件。如果是这样的话，这里可能需要采用完全不同的方法吗？

/* Stick & unstick logo, adjust content */
var offset = $(".logo").offset();
$(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if ((offset.top - 8) <= scrollTop) {
        $(".logo").addClass('fixed');
        $(".content").addClass('adjust');
    } else {
        $(".logo").removeClass('fixed');
        $(".content").removeClass('adjust');
    }
});

演示： http://jsfiddle.net/shimonoku/hfaeht2b/2/ ←在这个演示中，你会注意到一个名为＆＃34; target＆＃34;的蓝色div。在导航栏中 - 徽标应该在哪里结束（当你滚动得足够慢时）。

使用jQuery在滚动时调整位置属性并调整所有滚动速度

0 个答案: