положение: фиксированное и абсолютное одновременно.КАК? - PullRequest
Новая
       2

положение: фиксированное и абсолютное одновременно.КАК?

7 голосов
/ 15 марта 2011

Я хочу создать Элемент, который очень тонкий и очень высокий. Я хочу, чтобы элемент был виден все время, даже если вы прокрутите вправо. Это должно быть положение: зафиксировано вправо и влево, но его следует прокручивать вниз и вверх. Я искал с помощью Google, но не смог найти подходящий способ решения проблемы. Я нашел только этот сайт: http://demo.rickyh.co.uk/css-position-x-and-position-y/ Это именно то, что я хочу, но я использую jQuery, а не MooTools. Я ищу ту же функцию в JQuery. Я не очень хочу использовать 2 Frameworks. Кто-нибудь знает помощь? Что-нибудь? Я искал несколько часов, но не могу найти то, что соответствует моим потребностям в jQuery.

Ответы [ 2 ]

17 голосов
/ 15 марта 2011

Вот решение с помощью jquery

jsfiddle demo

HTML 

<div style="width:1000px;height:1000px;">
    <div id="box1" class="box" style="left:20px;top:20px;">
        My position-x is fixed but position-y is absolute.
    </div>
    <div id="box2" class="box" style="left:20px;top:120px;">
        My position-x is absolute but position-y is fixed.
    </div>
    <div id="box3" class="box" style="left:20px;top:220px;">
        Im positioned fixed on both axis.
    </div>
</div>

код 

$(window).scroll(function(){
    var $this = $(this);
    $('#box1').css('top', 20 - $this.scrollTop());
    $('#box2').css('left', 20 - $this.scrollLeft());
});

и немного CSS 

.box 
{
    width:400px;
    height:80px;
    background:gray;
    position:fixed;  
}
2 голосов
/ 19 августа 2014

В зависимости от предыдущего ответа, который помог мне с тем, что я пытался сделать, сохраняя div заголовка с фиксированной позицией-y, div слева с фиксированной позицией-x и div контента, который прокручивал бы и x, и y .

Я решил опубликовать свой jsfiddle на случай, если кто-нибудь найдет это полезным:

Моя демоверсия jsfiddle

HTML 

<body>
<div style="width:5000px;height:1000px;">
    <div id="box1" class="box">
        My position-x is fixed but position-y is scrollable.
    </div>
    <div id="box2" class="box">
        My position-y is scrollable but position-x is fixed.
    </div>
    <div id="box3" class="box">
        My position-x and position-y are both scrollable.
    </div>
</div>

код 

$(window).scroll(function(){
    var $win = $(window);
    $('#box2').css('top', 0 -$win.scrollTop());
    $('#box1').css('left', 120 -$win.scrollLeft());
    $('#box3').css('left', 120 -$win.scrollLeft());
    $('#box3').css('top', 20 -$win.scrollTop());
});

CSS 

.box {
    position:fixed;
}
#box1 {
    top: 0px;
    left: 120px;
    width: 1000px;
    height: 20px;
    background-color: #FF0000;
    z-index:150;
}
#box2 {
    top: 0px;
    left: 0px;
    width: 120px;
    height: 520px;
    background-color: #00FF00;
    z-index:200;
}
#box3 {
    top: 20px;
    left: 120px;
    width: 1000px;
    height: 500px;
    background-color: #0000FF;
    color: white;
    z-index:100;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...