VPF::Зафиксировать div по условию - Форум программистов

sashgera

Дата 30.12.2014, 14:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Здравствуйте
Есть js который фиксирует див #sidebar по двум условиям:
- если при прокрутке див #sidebar (в нем будет шапка таблицы) достигнет верха экрана
- если див #table_wrap (в нем будет шапка и таблица) окажется больше по высоте окна браузера

Код


<script type="text/javascript">
var jQnoC9 = jQuery.noConflict(); // query ноконфликт
if (jQnoC9('#sidebar').length) {
    var topPos = jQnoC9('#sidebar').offset().top;
    jQnoC9(window).scroll(function() {
        var newcss = (topPos < jQnoC9(window).scrollTop() && jQnoC9('#table_wrap').height() >= jQnoC9(window).height()) ? {
            position: 'fixed',
            top: 0
        } : {
            position: 'static'
        };
        jQnoC9('#sidebar').css(newcss)
    })
}
</script>

Код


<div id="table_wrap">
 <div id="sidebar">
    <div style="width:1000px; height:200px; background:#6F6; ">
    здесь будет шапка таблицы
    </div>
 </div>
 
    <div style="width:1000px; height:500px; background:#F30; ">
    здесь будет таблица
    </div>
</div>

Но есть проблема:
- если окно браузера сделать чуть меньше по высоте содержимого дива table_wrap, срабатывает условие js - шапка получает позицию fixed. Но при этом шапка при прокрутке "дергается" - быстро меняется с fixed на static
- если окно браузера сделать еще меньше, пикселей на ~200 - то все нормально, шапка перестает "дергаться"

Пожалуйста, помогите
вот пример: http://www.glass-pgc.ru/Untitled-6.html

sashgera

Дата 2.1.2015, 03:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Вопрос решен

sQu1rr

Дата 6.1.2015, 14:47 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 1
Всего: 13

Цитата(sashgera @ 2.1.2015, 00:39

)

Вопрос решен

Принято давать решение, если вдруг кто-то сталкнется с такой же проблеммой

Цитата(sashgera @ 30.12.2014, 11:14

)

вот пример: http://www.glass-pgc.ru/Untitled-6.html

Я бы сделал на форуме правило что весь код нужно выкладывать на jsfiddle. У меня половина сайтов (включая этот) на работе просто запрещены (точнее не разрешены).

sashgera

Дата 7.1.2015, 07:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 23.3.2014

Репутация: нет
Всего: нет

Цитата(sQu1rr @ 6.1.2015, 14:47)

Принято давать решение, если вдруг кто-то сталкнется с такой же проблеммой

выкладываю, сделал не сам, помогли:

Код


<script type="text/javascript">
var jQnoC8 = jQuery.noConflict(); // query ноконфликт
if (jQnoC8('#sidebar').length) {
    var tableSF_elem = jQnoC8('#sf');
    var heightTableWrap = jQnoC8('#table_wrap').height();
    var heightTable_Sf = tableSF_elem.height(); 
    var topPos = jQnoC8('#sidebar').offset().top;
    jQnoC8(window).scroll(function() {
        var newcss = (topPos < jQnoC8(window).scrollTop() && 
                     (heightTableWrap - ( heightTable_Sf - tableSF_elem.height() ))  >= 
                               jQnoC8(window).height()) ? {
            position: 'fixed',
            top: 0
        } : {
            position: 'static'
        };
        jQnoC8('#sidebar').css(newcss)
    })
}
</script>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »