Форум

al-teen · #1 (**permalink**) 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.
Ссылка на пример. Левая колонка.
В чем может быть проблема? Уже мозги закипают. Хотя бы носом ткните куда копать.

Aetae · #2 (**permalink**) 09.04.2013, 21:52

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

al-teen · #3 (**permalink**) 09.04.2013, 23:34

Сообщение от Aetae

Труъ-вариант: верстать так, чтобы эти блоки на самом деле никуда не скролились.

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

Aetae · #4 (**permalink**) 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 · #5 (**permalink**) 10.04.2013, 13:14

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

Форум

Справочник

Discord чат

Курсы javascript