Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
sashgera
3 / 3 / 4
Регистрация: 19.09.2011
Сообщений: 263
#1

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

30.12.2014, 01:45. Просмотров 747. Ответов 6
Метки нет (Все метки)

Здравствуйте
Есть 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
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
30.12.2014, 01:45
Ответы с готовыми решениями:

При клике на DIV меняется картинка другого DIV
Подскажите как это реализовать? Добавлено через 21 минуту Можно-ли решить...

Вписать код html страницы в <div></div>
Доброго времени суток :) Т.к. я профан в JS, а скорей новичок :) У меня на...

Слой div надо добавить в другой div
по нажатию надо вызывать функцию, которая будет копировать содержимое блока...

Скрыть один div и вывести второй div
всем привет, уважаемые форумчане! ситуация такая: есть 2 div-а....

Зафиксировать шапку
Данная структура работает, но кто делает кроссбраузерную вёрстку то IE-8,7...

6
massEffect
80 / 80 / 53
Регистрация: 22.03.2013
Сообщений: 260
30.12.2014, 20:18 #2
Не исправляя ваш код и стиль написания, сделайте так:
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
0
sashgera
3 / 3 / 4
Регистрация: 19.09.2011
Сообщений: 263
30.12.2014, 23:43  [ТС] #3
Цитата Сообщение от sashgera Посмотреть сообщение
Есть js который фиксирует див #sidebar по двум условиям:
если при прокрутке див #sidebar (в нем будет шапка таблицы) достигнет верха экрана
если див #table_wrap (в нем будет шапка и таблица) окажется больше окна браузера
massEffect, спасибо, но вы меня не совсем поняли или я, не точно описал проблему..
Да, в вашем варианте js фиксирует див #sidebar, если при прокрутке он достигнет верха экрана.
На самом деле нужно чтобы #sidebar получал позицию fixed оказавшись у верха экрана только в том случае, если #table_wrap (обертка двух дивов) окажется больше по высоте окна браузера, в противном случае - static
В примере, который я приводил все эти условия выполняются, но есть проблема, которую я уже описал выше.
Поизменяйте высоту вашего браузера - http://www.glass-pgc.ru/Untitled-6.html
0
massEffect
80 / 80 / 53
Регистрация: 22.03.2013
Сообщений: 260
31.12.2014, 03:36 #4
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)
высота стала исходной и т.д., вот вам и "мигание"...
0
sashgera
3 / 3 / 4
Регистрация: 19.09.2011
Сообщений: 263
01.01.2015, 05:39  [ТС] #5
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
massEffect
80 / 80 / 53
Регистрация: 22.03.2013
Сообщений: 260
01.01.2015, 11:16 #6
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)
    })
}
0
sashgera
3 / 3 / 4
Регистрация: 19.09.2011
Сообщений: 263
01.01.2015, 14:39  [ТС] #7
massEffect, спасибо, с наступившим Новым Годом!
0
01.01.2015, 14:39
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.01.2015, 14:39

Класс div внутри div
Здравствуйте. Нужна помощь. Есть div, внутри него N-ное число div'ов, нужно...

Добавление div в другой div
Здравствуйте,создаю динамический div,подскажите,как добавить его в &lt;div...

Как после нажатия кнопки, зафиксировать её цвет
Здравствуйте. Есть десяток кнопок. После нажатия на любую кнопку...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru