使用jquery将div从绝对定位转换为固定定位后无法滚动

Question

我有一个 div，一旦用户滚动到父 div 中的某个点，就会添加一个“固定”类。固定类只是将子 div 从绝对定位更改为固定定位。

但是，当用户在添加“固定”类时（由 js 中的“开始变量”指定）时滚动到某个点时会出现问题。用户失去向上或向下滚动几秒钟的能力。更复杂的是，这个问题只发生在使用此代码的六个父 div 中的第一个上。

这是添加“固定”类的 jquery 代码：

var begin = 164;

$("#portfolio_window").scroll(function () {     
    var y = $(this).scrollTop();

    if (y >= begin) {
        $('.details').addClass('fixed');
    } else {
        $('.details').removeClass('fixed');
    }
});

如果我将“开始”变量更改为 600 之类的值，用户将无法从 div 顶部滚动 600 像素。

您可以尝试在http://dev.zachboth.com/重现问题

这是我能够重现问题的最简单方法：

• 使用 Safari
• 点击“工作”部分中的“各种徽标”
• “各种徽标”部分出现后快速向下滚动
• 可能需要多次尝试才能真正出现问题

Answer 1

我可以解释你的问题：

问题在于，在您提到被破坏的“页面”上，您是否在 div#portfolio_window 中滚动。您提到的 position:fixed 元素是相对于窗口定位的。当您在该元素上滚动时，它会尝试滚动窗口（而不是父 div）。

http://jsfiddle.net/NThY7/

解决方案涉及更多。稍后我会提供解决方案。