Использование jQuery для сохранения прокрутки объекта в видимом окне

Я был в середине написания длинного описания того, что я хотел сделать, когда понял, что боковая панель "Как спросить/форматировать" на этой же странице "Спросите вопрос" делает именно то, что я хочу.

В принципе, он прокручивается вверх и вниз в унисон с остальной частью экрана, оставаясь выровненным по верхнему краю с основным разделом, если основной раздел не начнет прокручивать верхнюю часть видимого окна. В этот момент боковая панель перестает прокручиваться и начинает действовать так, как если бы она располагалась абсолютно, против верхней части видимого окна.

Я пробовал копаться в исходном коде и скриптах на этом экране "Спросить", но там так много происходит, что это практически невозможно (для меня, по крайней мере). Я предполагаю, что jQuery действительно делает это довольно простым, но я новичок в этом, поэтому мне трудно понять его. (И если это окажется обычным вопросом, мои извинения - я искал около часа, но есть так много тесно сформулированных вопросов jQuery, что я не смог выкопать ответ.)

Заранее благодарим за помощь.

Ответы

Ответ 1

Это пример для корзины покупок, которую Apple имеет на странице Applestore.

Логика:

  • проверьте, где находится липкий элемент
  • проверьте событие прокрутки, в котором находится верхнее окно
  • добавить или удалить класс CSS в липкий элемент

jQuery:

$(document).ready(function() {  
 // check where the shoppingcart-div is  
 var offset = $('#shopping-cart').offset();  

 $(window).scroll(function () {  
   var scrollTop = $(window).scrollTop(); // check the visible top of the browser  

   if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');  
   else $('#shopping-cart').removeClass('fixed');  
  });  
});

CSS:

.fixed {  
        position: fixed;   
        top: 20px;  
        margin-left: 720px;  
        background-color: #0f0 ! important; }

пример Ссылка

Ответ 2

Вот небольшой фрагмент, который я просто взбивал, чтобы держать объект на экране во время прокрутки.

LIVE DEMO

http://jsfiddle.net/Jaybles/C5yWu/

HTML

<div id='object'>Top: 0px</div>

CSS

#object{height:200px; width:200px;background:#f00;position:absolute;top:0;left:0;}

JQuery

$(window).scroll(function(){
    var objectTop = $('#object').position().top;
    var objectHeight = $('#object').outerHeight();    
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    if  (windowScrollTop  > objectTop)
        $('#object').css('top', windowScrollTop );
    else if ((windowScrollTop+windowHeight) < (objectTop + objectHeight))
        $('#object').css('top', (windowScrollTop+windowHeight) - objectHeight);        

    $('#object').html('Top: ' + $('#object').position().top + 'px');

});

ОБНОВЛЕНО ПРИМЕР (с таймером + анимация)

http://jsfiddle.net/Jaybles/C5yWu/2/

Ответ 3

если вам нужно сохранить его на нижнем уровне, так как это JQuery

$(document).scroll(function() {
    var objectTop = $('#shopping-cart').position().top;
    var objectHeight = $('#shopping-cart').outerHeight();  
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

   if((objectTop+objectHeight) <=  $('html').outerHeight())
       $('#'+cont).css('top', (windowScrollTop+windowHeight)- objectHeight);
   else
       $('#'+cont).css('top', $('html').outerHeight()- objectHeight);
});

Css

#shopping-cart{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}

если вам нужно использовать его сверху JQuery

$(document).scroll(function() {
    var objectHeight = $('#shopping-cart').outerHeight(); 
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();

    $('#shopping-cart').css('top', windowScrollTop );

});

Css

#shopping-cart{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
}

он сделает магию и не забудет сохранить ваши стили с позициями, и одна вещь не работает с Internet Explorer 8.0.7

Ответ 4

И если вам нужно только удерживать div в каком-то месте браузера, вам не нужен javascript, который вы можете сделать с помощью CSS.

#chatt-box {
    right: 5px;
    height: auto;
    width: 300px;
    position: fixed;
    bottom: 0px;
}