Floating DIV mittel Jquery. Bin nicht ganz zufrieden.

[xtramen01]

Hallo Leute,
ich möchte erreichen, das ein DIV Container beim Scrollen den Viewport nicht verlässt.
Also immer zu sehen ist. Eigentlich klappt das mit meiner Lösung auch. Bin aber nicht ganz zufrieden und weis nicht wie ich das umsetzen kann.

Der DIV Container soll immer erst dann mitscrollen, wenn er quasi oben am Viewport anstoßen würde.
Meine Lösung ist da nicht ganz optimal. Hat jemand einen Vorschlag? Würde mich seh glücklich schätzen.

Hier mal mein Code:

$(function() {

    function moveFloatMenu() {

       var y = $(this).scrollTop();
       var top = 163;

        if (y >= top) {
          var menuOffset = $(this).scrollTop() + "px";
        }else{
          var menuOffset = menuYloc.top + $(this).scrollTop() + "px";
        }

        $('#floatMenu').animate({
            top: menuOffset
        }, {
            duration: 500,
            queue: false
        });

    }

    menuYloc = $('#floatMenu').offset();

    $(window).scroll(moveFloatMenu);

    moveFloatMenu();

});

 

[CPoly]

Einfach position:fixed benutzen*

https://tinker.io/9e842

*sofern es nicht für mobile Geräte gedacht ist.