Знатокам JS и CSS, нужен небольшой код

@eocron · Регистрация: 23.05.2012

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

Помогите написать скрипт, который бы фиксировал (position: fixed

<div align="center" id="table_title"> </div> при достижении верхней границы экрана (как это событие проверить вообще) и снимал бы фиксацию когда <div> достигает изначальной своей координаты (запоминать позицию и тоже проверять).

CSS
1
2
3
4
5
#table_title
{
        width: 100%; <!-- без этого объект при фиксации не захочет быть по середине -->
        position: fixed; <!-- -->
}

В ява-скрипте не силен, такой код буду вечно собирать из кусочков. По алгоритму кажется очень простым, да и объектность языка должна позволять легко это делать, однако никто мне еще не ответил как это сделать...помогите, очень нужно. До этого был только опыт на С/C++, совсем чуть-чуть Html и по тихоньку изучаю CSS.

Я просто не пойму как делать проверку на положение элемента и его сближения с потолком.

@newJS · 07.02.2013, 13:13

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

Я просто не пойму как делать проверку на положение элемента и его сближения с потолком.

как вариант, так

CSS
1
#tabFix {margin:0 auto;}

JavaScript
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
42
43
44
45
46
47
function nextLoad(){
//если нужен пользовательский онлоад
 };
 
 
(function(){
var Q={}, d;
d=document;
 
 
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому немного тормозим
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };
 
function initFix(){
Q.tabF=d.getElementById("tabFix");
Q.tabS=d.getElementById("tabFix").style;
Q.forg=d.getElementById("forgery").style;
tabH=Q.tabF.offsetHeight;
tabT=Q.tabF.offsetTop;
//иначе все браузеры при переключении изменяют ширину таблицы, сам удивлён
Q.tabS.width=Q.tabF.offsetWidth+'px';
//иначе при переключении прыгает влево
Q.tabS.left=Q.tabF.offsetLeft+'px';
//при fixed это будет работать, при static игнорироваться
Q.tabS.top=0;//точка фиксации таблицы, можно отступ сделать от верха окна
//сей блок заменяет таблицу при переключении в fixed, так как в этот момент таблицу вышибает из потока и всё что ниже таблицы прыгает вверх, не надо нам этого
Q.forg.height=tabH+'px';
Q.forg.display="none";
 };
 
onscroll=function(){
var s=d.documentElement.scrollTop||d.body.scrollTop;
d.getElementById("mnb1").innerHTML=s;//показуха
 
if(s>=tabT){//прокрутили таблицу до верха окна
Q.tabS.position="fixed";
Q.forg.display="block";}
else{//таблица ниже верха окна
Q.tabS.position="static";
Q.forg.display="none";};
 };
 
 })();

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Фиксация таблицы вверху окна</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="tab4.css">
<script type="text/javascript" src="tab4.js"></script>
</head>
 
<body>
 
<div>text<br><br>text</div>
<br><br><br><br>
 
<table border="1" width="30%" cellpadding="0" cellspacing="0" id="tabFix">
<tr><td>
text<br>text<br>text<br>text
<div id="mnb1">0</div>
</td></tr></table>
<div id="forgery"></div>
 
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
<br><br><br><br><br><br>text<br><br><br><br><br>text<br><br><br><br>text
 
</body>
</html>

@eocron · 07.02.2013, 14:00 **[ТС]**

Спасибо огромное! Все понятно и подробно разложено, а то собирал с мира по нитке.

@newJS · 07.02.2013, 20:23

eocron, я понял проблему, подумаю, но только завтра днем

@eocron · 07.02.2013, 20:37 **[ТС]**

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

eocron, я понял проблему, подумаю, но только завтра днем

Надеюсь на ваш ответ!

@newJS · 08.02.2013, 08:56

в посте №2 я прощелкал

JavaScript
1
2
tabH=Q.tabF.offsetHeight;
tabT=Q.tabF.offsetTop;

надо так, и найти остальные переменные, их тоже исправить

JavaScript
1
2
Q.tabH=Q.tabF.offsetHeight;
Q.tabT=Q.tabF.offsetTop;

это новое

JavaScript
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
function nextLoad(){
//если нужен пользовательский онлоад, иначе можно удалить функцию и её вызов
 };
 
function nextResize(){
//если не нужен, можно удалить функцию и её вызов
 };
 
 
 
 
(function(){
var Q={}, d;
Q.flag=false;
d=document;
 
 
onload=function(){
//предположительно задержка может зависить от объёма страницы, без этой задержки осёл стартует через гланды, нажимаем F5, всё начинает работать, поэтому пришлось его тормозить
if(window.ActiveXObject){setTimeout(function(){initFix();}, 100);}
else{initFix();};
nextLoad();
 };
 
function initFix(){
Q.tabF=d.getElementById("tabFix");//ссылки на нужные элементы
Q.tabS=Q.tabF.style;
Q.forg=d.getElementById("forgery").style;
Q.tabT=Q.tabF.offsetTop;
//иначе все браузеры при переключении изменяют ширину таблицы, сам удивлён
Q.tabS.width=Q.tabF.offsetWidth+'px';
//иначе при переключении прыгает влево
Q.tabS.left=Q.tabF.offsetLeft+'px';
//при fixed это будет работать, при static игнорироваться
Q.tabS.top=0;//точка фиксации таблицы, можно отступ сделать от верха окна
//сей блок заменяет таблицу при переключении в fixed, так как в этот момент таблицу вышибает из потока и всё что ниже таблицы прыгает вверх, не надо нам этого
Q.forg.height=Q.tabF.offsetHeight+'px';
Q.forg.display="none";
Q.flag=true;
 };
 
onscroll=function(){
var s=d.documentElement.scrollTop||d.body.scrollTop;
d.getElementById("mnb1").innerHTML=s;//показуха
 
if(s>=Q.tabT){//прокрутили таблицу до верха окна
Q.tabS.position="fixed";
Q.forg.display="block";}
else{//таблица ниже верха окна
Q.tabS.position="static";
Q.forg.display="none";};
 };
 
onresize=function(){
var s, p;
if(Q.flag){//иначе ИЕ лезет сюда не дожидаясь онлоада, а дерева ещё нет
s=Q.forg.display;
p=Q.tabS.position;
Q.tabS.position="static";//не глядя перекидываем в статик
Q.forg.display="none";
Q.tabS.left=Q.tabF.offsetLeft+'px';//получаем новое значение
Q.tabS.position=p;//возвращаем что там было
Q.forg.display=s;
nextResize();};
 
 };
 
 })();

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@eocron Кактус 67 / 67 / 19 Регистрация: 23.05.2012 Сообщений: 342
	07.02.2013, 14:00 [ТС]
	Спасибо огромное! Все понятно и подробно разложено, а то собирал с мира по нитке. 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	07.02.2013, 20:23
	eocron, я понял проблему, подумаю, но только завтра днем 0