Come lasciare che un div "appiccicoso" fisso rimanga fuori dal punto di vista

Question

Sto cercando di seguire questo tutorial: http://jqueryfordesigners.com/fixed-floating-elements/.

Il problema è che ogni volta che il posizionamento fisso viene applicato al div, se la larghezza del browser viene modificata, il div si sposta in orizzontale per adattarsi al punto di vista. Nell'esempio tutorial http://static.jqueryfordesigners.com/demo/fixedfloat.html Questo non accade.

Questo è il mio codice (tutto è all'interno di un #Wrapper posizionato relativo):

CSS:

        #cart {
            position: absolute;
            right: 0;
            width: 270px;
        }

        #target {
            width: 270px;
            height: 200px;

            background-color: blue;
            background-position: 50% 50%;
            background-repeat: no-repeat;

            position: absolute;
            top: 250px;
            right: 0;

            padding: 0;
            border-radius: 15px 15px 0 0 ;
        }

        #drag-here {
            width: 270px;
            height: 0;

            background-image: url(drag-here.png);
            background-repeat: no-repeat;
            display: none;

            position: absolute;
            top: 470px;
            right: 0;
        }

        #cart-list {
            display: none;
            position: absolute;
            top: 430px;
            right: 0;

            list-style-type: none;
        }

        .sticky #target {position: fixed; top: 5px;}
        .sticky #drag-here {position: fixed; top: 225px;}
        .sticky #cart-list {position: fixed; top: 185px;}

Html:

<section id="cart">
    <div id="target" class="target-listen"></div>
    <div id="drag-here"></div>
    <ul id="cart-list">
    </ul>
</section>

JQuery:

sticky = false;
initialOffset = $("#target").offset().top - 5;
$(window).scroll(function () {
    if ($(this).scrollTop() >= initialOffset) {
        if (!sticky) {
            $("#cart").addClass("sticky");
            sticky = true;
        } 
    }
    else {
        if (sticky) {
            $("#cart").removeClass("sticky");
            sticky = false;
        }
    }
});

Puoi vedere la mia pagina qui: http://www.brandcoffee.it/test/brandapart/imagick.php

Answer 1

Penso di rimuovere right : 0; in #target dovresti ... dovrebbe.

Answer 2

Prova a fornire il width attributo in ratio (o percentuale) piuttosto che valori di pixel fissi. come :

width:25%; //for #target, and
float:right; //make target float right

width:75%; // for other contents on left side