Фиксированный блок скачет в Хроме [Архив форума]

al-teen

09.04.2013, 19:26

Плавающая колонка скачет в браузерах, в которых нет плавного скроллинга. Хром, Опера. В 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.
Ссылка (http://verstka.formadesign.ru/dom/catalog_tile_item.html) на пример. Левая колонка.
В чем может быть проблема? Уже мозги закипают. Хотя бы носом ткните куда копать.

Aetae

09.04.2013, 21:52

И будет скакать. Scroll вызывается не на каждый пиксель, а скачками.
Быдло-вариант, использующийся на большинстве jquery сайтов: использовать всякий animate для сглаживания движения на этих отрезках(выглядит как будто блок догоняет скролл).
Труъ-вариант: верстать так, чтобы эти блоки на самом деле никуда не скролились.

al-teen

09.04.2013, 23:34

Труъ-вариант: верстать так, чтобы эти блоки на самом деле никуда не скролились.
От анимации как раз и отказались. Потому что действительно - быдлорешение. Так понимаю, "никуда не скроллились" - это fixed? Что то никак не осилю момент с двойным прилипанием, т.е. при скролле вниз липнет по нижней границе, вверх - по верхней.

Aetae

10.04.2013, 01:46

Да, либо 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>

al-teen

10.04.2013, 13:14

Спасибо. Толкнули к пониманию проблемы.