Остановка блока при прокрутке страницы вверх (подскажите)

@olf · Регистрация: 11.02.2010

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

Есть, например, код:

HTML5
1
2
<div class="header" style="height: 100px;"></div>
<div id="fix"></div>

Как сделать, чтоб блок "fix" при прокручивании страницы вверх оставался вверку окна браузера?
Другими словами. Если координата "top" элемента <div id="fix"> становится "0", - присвоить ему стиль position: fixed; (или класс).

P.S. Я плохо знаю синтаксис JavaScript (вернее не знаю). Но здается мне, тут надо плясать от координат окна браузера. Вот откопал скрипт, который их определяет:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getElementPosition(elemId)
{
   var elem = document.getElementById(elemId);
 
   var w = elem.offsetWidth;
   var h = elem.offsetHeight;
 
   var l = 0;
   var t = 0;
 
   while (elem)
   {
     l += elem.offsetLeft;
     t += elem.offsetTop;
     elem = elem.offsetParent;
   }
 
   return {"left":l, "top":t, "width": w, "height":h};
}

Т.е. сделать условие if(){}, где при условии, что "top" == 0, элементу "div" назначается class. Но как его написать, - не знаю. Вобщем, помощь нужна.
Спасибо откликнувшимся заранее!

@newJS · 31.07.2012, 09:52

Только это не валидно, хотя и работает в ИЕ, опере, лисе, хроме и сафари.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>w123</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="scrol_2.css">
<script type="text/javascript" src="scrol_2.js"></script>
</head>
 
<body onscroll="f1();">
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="mnb" style="position:fixed; top:77px; font-size:222%; color:red;">0</div>
<div class="header" style="height: 100px;">qqqqqqqqqqqqqqqq</div>
<div id="fix">Поднимусь на верх и остановлюсь.</div>
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text 1
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text 2
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text 3
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
text 4
 
</body>
</html>

CSS
1
2
#fix {color:hotpink;}
.fixYes {position:fixed; top:0;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var f1;
(function(){
var d, scr, obj;
d=document;
 
onload=function(){
obj=d.getElementById("fix");
scr=obj.offsetTop;
 
 };
 
f1=function(){
if(d.documentElement.scrollTop||d.body.scrollTop>scr){
obj.className="fixYes";}
else{obj.className="";};
 
 
d.getElementById("mnb").innerHTML=scr+' '+s;
 
 };
 
 
 })();

@olf · 31.07.2012, 11:20 **[ТС]**

newJS, в некоторых версиях браузеров блок при прокрутке сразу скачет вверх.
Мне на jQuery подсказали решение:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Остановка блока при прокрутке страницы вверх</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
<script language="JavaScript" type="text/javascript">
var TimScroll;
var Ready = true;
 
$(window).scroll(function(){
    if(Ready){
        Ready = false; clearTimeout(TimScroll);
        Scroll_Tst()
        TimScroll=setTimeout("Ready = true",10);
    } 
});
</script>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<div class="header"></div>
 
<div id="box" class="content">
    <h1 class="title">Поднимусь на верх и остановлюсь.</h1>
    <p><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 /><br /><br /><br /></p>
</div>
 
</body>
</html>

CSS
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
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0px;
}
h1 {
    margin: 0;
    padding: 0px;
}
.header {
    height: 100px;
    background-color: #FCF;
}
.content {
    position:relative;
    width:100%;
    margin:0px auto;
}
.ttabl {
    width: 100%;
    text-align: left;
    /*border-bottom:1px solid black*/
}
 
.title {
    height: 30px;
    width:100%;
    position:static;
    background-color: #39F;
}
.top-visible .title {
    top:0px;
    position:fixed!important;
    width:100%;
}
.top-visible-fix {
    display:inline;
    vertical-align:bottom;
 
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Scroll_Tst(){
  var WinTop = $(window).scrollTop();
  var WinBottom = WinTop+$(window).height();
 
    $(".content").each(function (j) {
    var a=$(this);
    var Top = a.position().top;
    var Bottom = Top+a.height();
 
    var b = a.find("div.title");
    var b_Heig = b.outerHeight() + 30; //30 - отступ от низа
 
    if(Top > WinTop||Bottom < WinTop||Top > WinBottom) {    // container либо вне поля видимости, либо не
    $(this).attr('class','content'); return true;}  //влотную к верху экрана;
 
    if(Bottom > WinTop && Top < WinTop ){   //container влотную к верху экрана;
    if(Bottom - b_Heig > WinTop){$(this).attr('class','content top-visible');
    } else {$(this).attr('class','content top-visible-fix')}
    return true;}
 
    });
}

Правда, ради этого библиотеку подключать надо.

@newJS · 31.07.2012, 20:52

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

в некоторых версиях браузеров блок при прокрутке сразу скачет вверх.

Извини, это я виноват, неудачно подредактировал, скобки пропустил.
здесь ошибка

JavaScript
1
if(d.documentElement.scrollTop||d.body.scrollTop>scr){

так правильно

JavaScript
1
if((d.documentElement.scrollTop||d.body.scrollTop)>scr){

эту строку удалить

JavaScript
1
d.getElementById("mnb").innerHTML=scr+' '+s;

и эту в html

HTML5
1
<div id="mnb" style="position:fixed; top:77px; font-size:222%; color:red;">0</div>

новая версия

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
(function(){
var d, scr, obj;
d=document;
 
onload=function(){
if(d.addEventListener){d.addEventListener('scroll', f1, false);}
else{d.body.onscroll=f1;};//осёл
obj=d.getElementById("fix");
scr=obj.offsetTop;
 };
 
function f1(){
 
if((d.documentElement.scrollTop||d.body.scrollTop)>scr){obj.className="fixYes";}
else{obj.className=null;};
//или так, если два или более классов
/*
var s;
s=obj.className;
if((d.documentElement.scrollTop||d.body.scrollTop)>scr){
if(s.indexOf("fixYes")<0){obj.className+=" fixYes";}}
else{if(s.indexOf("fixYes")>=0){obj.className=s.replace(/ fixYes/g, "");}};
*/
 
 };
 
 })();

В htmk в body удалить событие, оно теперь скриптом вешается.
css тот же.

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/