Question

hello friends i designed a floating div and its working perfectly but due to some reasons i don’t want to use position:relative or position:absolute in my code

$(window).scroll(function () {

        var topWindowPosition = $(window).scrollTop();
        var leftWindowPosition = $(window).scrollLeft();
        var topLeftNavHeight = 200;
        if (topWindowPosition >= topLeftNavHeight) {
            $("#scroll").css({ top: topWindowPosition - topLeftNavHeight, left: 0, position: 'relative' });
        } else {
            $("#scroll").css({ top: 0, left: 0, position: 'relative' });
        }
        $("#scroll").forceRedraw();
    });

you can also see working demo here

http://jsfiddle.net/9E225/1/

can i make the same effect without using positions please help me out.

Thanks in advance

Answer 1

Sure, just use margins instead of positions. Eg:

if (topWindowPosition >= topLeftNavHeight) {
    $("#scroll").css({ marginTop: topWindowPosition - topLeftNavHeight, marginLeft: 0});
} else {
    $("#scroll").css({ marginTop: 0, marginLeft: 0 });
}

jsFiddle: http://jsfiddle.net/9E225/2/