Фиксированный блок скачет в Хроме
Плавающая колонка скачет в браузерах, в которых нет плавного скроллинга. Хром, Опера. В FF нормально.
Сама функция: function leftSideScroll(){ var elem = $('.description_catalog_inner'); var brand = $('.brand_inform'); var brandHeight = brand.height(); if(elem.length){ if(brand.length !=0){ var parBottom = elem.parent().parent().offset().top + brandHeight; } else { var parBottom = elem.parent().parent().offset().top; } var parTop = parBottom + elem.parent().parent().height() - 40; var elemBottom = elem.offset().top; var elemTop = elemBottom + elem.height(); var height = elem.height(); var winBottom = $(window).scrollTop() + 70; var winTop = winBottom + $(window).height() - 70; var newTop = elemBottom; if((height < elem.parent().parent().height())){ if(height > $(window).height()){ if(newTop > winBottom){ newTop = winBottom; } if(newTop + height < winTop){ newTop = winTop - height; } if(newTop < parBottom){ newTop = parBottom; } if(newTop + height > parTop){ newTop = parTop - height; } } else { newTop = winBottom; if(newTop + height > parTop){ newTop = parTop - height; } if(newTop < parBottom){ newTop = parBottom; } } elem.offset({"top": newTop}); } } } Инициация по event scroll. Ссылка на пример. Левая колонка. В чем может быть проблема? Уже мозги закипают. Хотя бы носом ткните куда копать. |
И будет скакать. Scroll вызывается не на каждый пиксель, а скачками.
Быдло-вариант, использующийся на большинстве jquery сайтов: использовать всякий animate для сглаживания движения на этих отрезках(выглядит как будто блок догоняет скролл). Труъ-вариант: верстать так, чтобы эти блоки на самом деле никуда не скролились. |
Цитата:
|
Да, либо fixed, либо олдскул:
<!DOCTYPE html> <html lang="ru-RU"> <head> <meta charset="UTF-8"> <style type="text/css"> *{margin: 0; padding: 0;} html, body, .main{ width: 100%; height: 100%; overflow: hidden; } .main { overflow: auto; } .sidebar { width:200px; margin-right: -200px; left: 0; bottom : 0; float:left; position: relative; height: 800px; background-color:#ddf; } .content{ margin-left: 200px; position: relative; height: 2000px; background-color: #dfd; } .bottom-span{ position: absolute; bottom:0; left: 0; } .middle-span{ position: absolute; bottom:50%; left: 0; } </style> </head> <body> <div class="main"> <div class="sidebar"> верх <span class="middle-span">середина</span> <span class="bottom-span">низ</span> </div> <div class="content"> Контент верх <span class="middle-span">Контент середина</span> <span class="bottom-span">Контент низ</span> </div> </div> <script type="text/javascript"> (function(){ var main = document.getElementsByClassName('main')[0], sidebar = document.getElementsByClassName('sidebar')[0], fixed = false; main.onscroll = function(){ var scroll = main.scrollTop; if(scroll > sidebar.offsetHeight - main.clientHeight) { if(fixed) return; sidebar.style.position = 'absolute'; fixed = true; } else { if(!fixed) return; sidebar.style.position = ''; fixed = false; } } }()) </script> </body> </html> |
Спасибо. Толкнули к пониманию проблемы.
|
Часовой пояс GMT +3, время: 00:01. |