jquery - 将 Div 从“固定”更改为“绝对”并将 Div 放在当前浏览器窗口位置的顶部（不是页面顶部）

Question

我遇到的问题是从位置更改 Div：已修复；到浏览器当前滚动的绝对位置。默认情况下，交换css位置：绝对将Div锁定在页面顶部......而不是浏览器窗口的顶部......所以如果您滚动，当您单击时，div会跳转到html页面的顶部。

我希望我不会过度解释看似简单的问题。

这里的例子——jsfiddle.net/zsa9a/15/

我在 $('#FloatingDiv').css({position:'absolute/relative/static/inherit', top:'AllSortsOfDifferentStuff'}); 上尝试了很多变化。

这就是我开始的地方...

$('#BtnAbsolute').click(
    function () {
    $('#FloatingDiv').css({position:'absolute'});
});

任何帮助将不胜感激！

Answer 1

我不确定这是否正是您想要的效果。见小提琴。在我看来，您需要使用scrollTop()才能获得当前窗口的滚动位置。

$('#BtnAbsolute').click( function () {
    $('#FloatingDiv').css({
        position:'absolute',
        top: $(window).scrollTop() - 20+'px'
    });
});


$('#BtnFixed').click(function () {
    $('#FloatingDiv').css({
        position:'fixed',
        top: 0
    });  
});