Зафиксировать div по условию

@sashgera · Регистрация: 19.09.2011

Студворк — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>

HTML5
1
2
3
4
5
6
7
8
9
10
11
<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

@massEffect · 30.12.2014, 20:18

Не исправляя ваш код и стиль написания, сделайте так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">  
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
</head>
<body style='height:2000px'>
 
<div id="table_wrap" style="top:100px;position:relative ">
 <div id="sidebar">
    <div style="width:1000px; height:200px; background:#6F6; ">
    здесь будет шапка таблицы
    </div>
 </div>
 
    <div style="width:1000px; height:500px; background:#F30; ">
    здесь будет таблица
    </div>
</div>
 
<script>
 
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()) ? {
            position: 'fixed',
            top: 0
        } : {
            position: 'static'
        };
        jQnoC9('#sidebar').css(newcss)
    })
}
 
</script>
 
 
</body>
</html>

С JQuery нужно обращаться в соответствующий раздел форума, здесь только javascript

@sashgera · 30.12.2014, 23:43 **[ТС]**

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

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

massEffect, спасибо, но вы меня не совсем поняли или я, не точно описал проблему..
Да, в вашем варианте js фиксирует див #sidebar, если при прокрутке он достигнет верха экрана.
На самом деле нужно чтобы #sidebar получал позицию fixed оказавшись у верха экрана только в том случае, если #table_wrap (обертка двух дивов) окажется больше по высоте окна браузера, в противном случае - static
В примере, который я приводил все эти условия выполняются, но есть проблема, которую я уже описал выше.
Поизменяйте высоту вашего браузера - http://www.glass-pgc.ru/Untitled-6.html

@massEffect · 31.12.2014, 03:36

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="table_wrap">
 <div id="sidebar">
    <div style="width:1000px; height:200px; background:#6F6; ">
    здесь будет шапка таблицы<br><br>
    Два дива (зеленый и красный) обернуты дивом table_wrap. Если содержимое table_wrap не умещается по высоте окна браузера - зеленый див получает позицию fixed, если его прокрутить вверх экрана.<br><br>
    ПРОБЛЕМА:<br>
    • если окно браузера сделать чуть меньше по высоте содержимого дива table_wrap, срабатывает условие js - шапка получает позицию fixed. Но при этом шапка при прокрутке "дергается" - быстро меняется с fixed на static<br>
    • если окно браузера по высоте, сделать еще меньше, пикселей на ~200 - то все нормально, шапка перестает "дергаться"
    </div>
 </div>
 
    <div style="width:1000px; height:300px; background:#F30; ">
    здесь будет таблица
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript">
var jQnoC9 = jQuery.noConflict(); // query ноконфликт
if (jQnoC9('#sidebar').length) {
    var heightWrap = jQnoC9('#table_wrap').height();
    var topPos = jQnoC9('#sidebar').offset().top;
    jQnoC9(window).scroll(function() {
        var newcss = (topPos < jQnoC9(window).scrollTop() && heightWrap >= jQnoC9(window).height()) ? {
            position: 'fixed',
            top: 0
        } : {
            position: 'static'
        };
        jQnoC9('#sidebar').css(newcss)
    })
}
</script>

Вы проверяли высоту контейнера двух дивов, один из которых при удачной проверке вырывался из потока (при fixed)
высота уменьшилась, в следующий раз проверка не сработала, елемент вернулся в поток (при static)
высота стала исходной и т.д., вот вам и "мигание"...

@sashgera · 01.01.2015, 05:39 **[ТС]**

massEffect, большое спасибо!

Добавлено через 17 часов 42 минуты
massEffect, у меня к вам еще одна просьба.
В контейнере #table_wrap будет таблица с фильтрацией строк из выпадающего списка, соответственно высота таблицы и самого контейнера может меняться.

Если выполнить фильтрацию строк таблицы, высота контейнера изменится, но уже никак не повлияет на текущую позицию #sidebar - так как при загрузке страницы высота контейнера уже проверена:
var heightWrap = jQnoC9('#table_wrap').height();

Как динамически проверить высоту контейнера #table_wrap ?
Пробовал добавлять функцию в onchange селекта, но без результата.

Сможете помочь? Пожалуйста, посмотрите: http://www.glass-pgc.ru/Untitled-9.html

@massEffect · 01.01.2015, 11:16

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var jQnoC9 = jQuery.noConflict(); // query ноконфликт
 
if (jQnoC9('#sidebar').length) {
    var tableSF_elem = jQnoC9('#sf');
    var heightTableWrap = jQnoC9('#table_wrap').height();
    var heightTable_Sf = tableSF_elem.height(); 
    var topPos = jQnoC9('#sidebar').offset().top;
 
    jQnoC9(window).scroll(function() {
        var newcss = (topPos < jQnoC9(window).scrollTop() && 
                     (heightTableWrap - ( heightTable_Sf - tableSF_elem.height() ))  >= 
                               jQnoC9(window).height()) ? {
            position: 'fixed',
            top: 0
        } : {
            position: 'static'
        };
        jQnoC9('#sidebar').css(newcss)
    })
}

@sashgera · 01.01.2015, 14:39 **[ТС]**

massEffect, спасибо, с наступившим Новым Годом!

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@sashgera 6 / 6 / 5 Регистрация: 19.09.2011 Сообщений: 537
	01.01.2015, 05:39 [ТС]
	massEffect, большое спасибо! Добавлено через 17 часов 42 минуты massEffect, у меня к вам еще одна просьба. В контейнере #table_wrap будет таблица с фильтрацией строк из выпадающего списка, соответственно высота таблицы и самого контейнера может меняться. Если выполнить фильтрацию строк таблицы, высота контейнера изменится, но уже никак не повлияет на текущую позицию #sidebar - так как при загрузке страницы высота контейнера уже проверена: var heightWrap = jQnoC9('#table_wrap').height(); Как динамически проверить высоту контейнера #table_wrap ? Пробовал добавлять функцию в onchange селекта, но без результата. Сможете помочь? Пожалуйста, посмотрите: http://www.glass-pgc.ru/Untitled-9.html 0

@sashgera 6 / 6 / 5 Регистрация: 19.09.2011 Сообщений: 537
	01.01.2015, 14:39 [ТС]
	massEffect, спасибо, с наступившим Новым Годом! 0