Как оставить фиксированный «липкий» div вне окна просмотра - PullRequest
Новая
       26

Как оставить фиксированный «липкий» div вне окна просмотра

1 голос
/ 21 февраля 2012

Я пытаюсь следовать этому уроку: http://jqueryfordesigners.com/fixed-floating-elements/.

Проблема в том, что всякий раз, когда фиксированное позиционирование применяется к div, если ширина браузера изменяется, div перемещается горизонтально, чтобы поместиться в окне просмотра,В учебном примере http://static.jqueryfordesigners.com/demo/fixedfloat.html этого не происходит.

Это мой код (все находится внутри относительного позиционирования #wrapper):

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;
        }
    }
});

Вы можете посмотреть мою страницу здесь: http://www.brandcoffee.it/test/brandapart/imagick.php

Ответы [ 2 ]

1 голос
/ 21 февраля 2012

Я думаю, что удаление right : 0; в #target должно подойти.

0 голосов
/ 21 февраля 2012

Попробуйте указать атрибут width в ratio (или процентах), а не в фиксированных значениях пикселей. такие как: 

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

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