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

Question

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

我希望我不要过分解释看似简单的问题。

此处的示例 - jsfiddle.net/zsa9a/15/

我已尝试过$（＆＃39;＃FloatingDiv＆＃39;）。css（{position：＆＃39; absolute / relative / static / inherit＆＃39;，top：＆＃ 39; AllSortsOfDifferentStuff＆＃39;}）;

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

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

任何帮助都将非常感谢！

Answer 1

我不确定这是否与你想要的效果完全相同。见fiddle。听起来我需要使用scrollTop()来获取当前窗口的滚动位置。

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


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