Выделение пункта меню при прокрутке

@ychelovek · Регистрация: 31.03.2013

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

http://webmix.info/ (не реклама).
В общем при нажатии на пункт меню или при прокрутке к нему пункт меню меняет свой стиль. Как мне так же это реализовать (гуглу не знаю как задать вопрос)
Спасибо вам заранее

@Mixproger · 31.08.2013, 00:22

на javascript простейшее решение onMouseOver="this.className='Имя класса на котор.меняешь'", onMouseOut="this.className='Имя класса с котор.меняешь'". Если я правильно понял задачу.

Добавлено через 7 минут
А вообще там jQuary используется и куча дополнений к нему к примеру jQuery.scrollTo

Добавлено через 4 минуты
Если javascript знаете то ваше решение http://api.jquery.com/scrollTop/

Добавлено через 2 минуты
или вот почти готовое решение только наоборот. http://www.xiper.net/examples/... index.html

@ychelovek · 31.08.2013, 09:46 **[ТС]**

Mixproger, А как сделать смену при пролистывании до определенного блока. При нажатии это то понятно)

@Mixproger · 31.08.2013, 11:10

Ну вот во втором примере при нажатии кнопки происходит переход к определенной части текста, а ван надо сделать наоборот при переходе к определ. части текста нужно чтобы "нажималась кнопка", в вашем случае менялся цвет. Посмотрите как там сделано и сделайте наоборот.

@Shmasya · 31.08.2013, 11:44

Конечно классно получилось, но на сайте он предлагает свои web услуги в виду создания сайта и прочее. У нас тут чел был, который в одной теме просил сделать макет, в другой предлагал продать макет.

@ychelovek · 31.08.2013, 15:09 **[ТС]**

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

Конечно классно получилось, но на сайте он предлагает свои web услуги в виду создания сайта и прочее. У нас тут чел был, который в одной теме просил сделать макет, в другой предлагал продать макет.

ахахах бывает же такое))

@newJS · 31.08.2013, 21:04

как понял, так и сделал

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="menuG">
<ul>
<li class="act"><div><div><div><span><a href="#anchor1">one</a></span></div></div></div></li>
<li><div><div><div><span><a href="#anchor2">two</a></span></div></div></div></li>
<li><div><div><div><span><a href="#anchor3">three</a></span></div></div></div></li>
<li><div><div><div><span><a href="#anchor4">foor</a></span></div></div></div></li>
<li><div><div><div><span><a href="#anchor5">five</a></span></div></div></div></li>
</ul>
</div>
<div id="mnb">0</div>
 
<a name="anchor1"></a>
text1<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="anchor2"></a>
text2<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="anchor3"></a>
text3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="anchor4"></a>
text4<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="anchor5"></a>
text5<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>
text6

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
42
43
44
45
46
47
48
49
50
51
52
53
54
body {margin-top:0; padding-top:0;}
body, #menuG {background:window;}
 
/* центрирование смещено на 3рх влево, если это критично, обнуляем маргин первому ЛИ, #menuG li:first-child {margin:0;} */
 
#menuG {text-align:center; width:100%;}
#menuG {position:fixed; top:0; left:0; padding:3px 0 7px 0;}
#menuG ul {margin:0; padding:0; font-size:0;}/* убить пробел между ЛИ */
#menuG li {display:inline-block; list-style-type:none; margin:0 0 0 -3px;}
#menuG li:hover a {color:red;}
#menuG li.act:hover a {cursor:default;}
#menuG li.act:hover a, #menuG a  {color:yellow;}
#menuG a {padding:0 25px; text-decoration:none; cursor:pointer;}
#menuG a, a[name^="anchor"] {display:block;}
 
#menuG li span {text-align:center; font-size:22px; white-space:nowrap; height:35px; line-height:35px; font-family:Georgia, Serif; font-style:italic;}
 
#menuG li div {background-image:url("data:image/gif;base64,\
R0lGODlhFABpAFUAACH5BAEAAAAALAAAAAAUAGkApQAAAKTS0n6ysoW4uIu9vZDCwpXGxoG1tXas\
rJnJyZfIyJvLy47AwIi7u5PExHqwsHKpqW6mpmmiop/NzZ3MzGWenqDOzqHPz2CamluWlqLQ0KLR\
0VaSkqPR0VCOjkuJiUWFhUCAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAb/QIBw\
SCwaj0hAYJk0Lp/NYWdK7UQBm6w2G9V4v9/mZUwuJy3otNqCnLjfcDeSQq/b6ceFfs/fGxOAgYKC\
RgqGh4iIRQaMjY6PRQ6Sk5SVRAWYmZqbBUQMn6ChogxDBKanqKmmQw2trq+wrUIDtLW2t7VCB7u8\
vb68AALCw8TFxAAPycrLzMsACNDR0tPSENbX2NnZEdzd3t/fEuLj5OXlFejp6uvrGO7v8PHxGfT1\
9vf3ABz7/P3+/QA8CBxIsCBBIR8SKlzIUCEREBAjSpwIAkmIixgzXnzCsaPHjyBDigRZpaTJkltS\
qkwJpqXLlmViyoy5pqZNNHFy6nRzp6dP1zp9ggrVM6ioUUCJkio19KipU0aVokqVxKlq1VFYsara\
ujWWV6+4wob9RZassbNnm6lVS61tW21w4YKbO9ecXbvs8uaVx5cvvr9//wkWbLBw4YaIEVNcvFij\
48cbRyIZ2ZEIZY9CTmqugmWlZy0AXoqGObN0mZuo0+xc/ean6zpDY+85ShsQgKW4DQF4ypsRgKnA\
HQixSrwTgKzIS3HlyuqrVyJixRIpS7YI2rNF1jYz4paakbjZjtD1huQuOSR60yXp664J4AxRBl8p\
fAUAw/pCIuLfjyQIADs=");}
 
#menuG li.act div {background-image:url("data:image/gif;base64,\
R0lGODlhFABpAFUAACH5BAEAACIALAAAAAAUAGkAhQAAAP/NtP/Epv/Gqv/Bov+7mP++nf+/oP/C\
pP/FqP+1kP+5lv+3k/+8m//IrP/Jrv/Hq//KsP/Kr/+zjf+xiv/Lsf+vh/+sg//Lsv/Msv+qf/+o\
fP/Ms/+leP/Ns/+idP+gcP+dbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAb/QJFw\
SCwaj0hRYJk0Lp/NoWdK9URFnKw2G814v98mZkwuJyvotLqCjLjfcDdSQq/b6ceHfs/fGx2AgYKC\
RhCGh4iIRQOMjY6PRQmSk5SVRAKYmZqbAkQIn6ChoghDBKanqKmmQwetrq+wrUIGtLW2t7VCDbu8\
vb68IgXCw8TFxCILycrLzMsiDNDR0tPSCtbX2NnZE9zd3t/fFOLj5OXlFujp6uvrF+7v8PHxGvT1\
9vf3Ihv7/P3+/SI6CBxIsCBBIR8SKlzIUCEREBAjSpwIAkmIixgzXnzCsaPHjyBDigRZpaTJkltS\
qkwJpqXLlmViyoy5pqZNNHFy6nRzp6dP1zp9ggrVM6ioUUCJkio19KipU0aVokqVxKlq1VFYsara\
ujWWV6+4wob9RZassbNnm6lVS61tW21w4YKbO9ecXbvs8uaVx5cvvr9//wkWbLBw4YaIEVNcvFij\
48cbRyIZ2ZEIZY9CTmqugmWlZy0iXoqGObN0mZuo0+xc/ean6zpDY+85ShuQiKW4DYl4ypuRiKnA\
EwixSryTiKzIS3HlyuqrVyJixRIpS7YI2rNF1jYz4paakbjZjtD1huQuOSR60yXp664JYA1RBl8p\
fEUEw/pCIuLfjyQIADs=");}
 
/* у div маргин должен быть равен ширине боковой картинки*/
#menuG li>div {background-repeat:repeat-x; background-position:0 -35px; margin:0 20px;}
#menuG li>div>div {background-repeat:no-repeat; background-position:left 0; margin:0 0 0 -20px;}
#menuG li>div>div>div {background-repeat:no-repeat; background-position:right -70px; margin:0 -20px 0 0;}
 
 
#mnb {padding:0 9px; font-size:33px; background:silver; position:fixed; top:50px; left:350px;}

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
(function(){
var Q, d;
Q={};
Q.m=[];
d=document;
 
onload=function(){
init();
 
 };
 
function init(){
var el, k, m, h, n;
if(d.compatMode=="CSS1Compat"){Q.h=d.documentElement.scrollHeight;}
else{Q.h=d.body.scrollHeight;};
el=d.getElementById("menuG");
 
h=el.offsetHeight;
m=d.getElementsByTagName("a");
k=m.length;
while(k--){if(m[k].name.indexOf("anchor")==0){
Q.m.unshift([0, m[k].offsetTop+h]);
m[k].style.height=h+'px';}};
 
m=el.getElementsByTagName("li");
n=k=m.length;
while(k--){
m[k].onclick=clikLI;
Q.m[k][2]=k==n-1?Q.h:Q.m[k+1][1]+k*h;
Q.m[k][0]=m[k];};
Q.L=Q.m.length;
Q.a=m[0];
start();// это нужно для возможного рестарта
//alert(Q.m);
 };
 
function clikLI(){
Q.a.className="";
this.className="act";
Q.a=this;
 };
 
onscroll=function start(){
var s, k;
s=document.documentElement.scrollTop||document.body.scrollTop;
k=Q.L;
while(k--){
if(s>Q.m[k][1]&&s<Q.m[k][2]){
d.getElementById("mnb").innerHTML=s+' '+Q.m[k][1]+' '+Q.m[k][2];
 
if(Q.m[k][0]!=Q.a){
Q.a.className="";
Q.m[k][0].className="act";
Q.a=Q.m[k][0];}}};
 
 };
 
 })();

Новые блоги и статьи Все статьи Все блоги /
моя боль 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/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@ychelovek 13 / 13 / 3 Регистрация: 31.03.2013 Сообщений: 287

	Выделение пункта меню при прокрутке 30.08.2013, 20:17. Показов 9806. Ответов 6 Метки нет (Все метки) http://webmix.info/ (не реклама). В общем при нажатии на пункт меню или при прокрутке к нему пункт меню меняет свой стиль. Как мне так же это реализовать (гуглу не знаю как задать вопрос) Спасибо вам заранее 0

@Mixproger 13 / 4 / 0 Регистрация: 05.07.2013 Сообщений: 21
	31.08.2013, 00:22
	на javascript простейшее решение onMouseOver="this.className='Имя класса на котор.меняешь'", onMouseOut="this.className='Имя класса с котор.меняешь'". Если я правильно понял задачу. Добавлено через 7 минут А вообще там jQuary используется и куча дополнений к нему к примеру jQuery.scrollTo Добавлено через 4 минуты Если javascript знаете то ваше решение http://api.jquery.com/scrollTop/ Добавлено через 2 минуты или вот почти готовое решение только наоборот. http://www.xiper.net/examples/... index.html 0

@ychelovek 13 / 13 / 3 Регистрация: 31.03.2013 Сообщений: 287
	31.08.2013, 09:46 [ТС]
	Mixproger, А как сделать смену при пролистывании до определенного блока. При нажатии это то понятно) 0

@Mixproger 13 / 4 / 0 Регистрация: 05.07.2013 Сообщений: 21
	31.08.2013, 11:10
	Ну вот во втором примере при нажатии кнопки происходит переход к определенной части текста, а ван надо сделать наоборот при переходе к определ. части текста нужно чтобы "нажималась кнопка", в вашем случае менялся цвет. Посмотрите как там сделано и сделайте наоборот. 1

@Shmasya 8 / 14 / 3 Регистрация: 19.08.2013 Сообщений: 68
	31.08.2013, 11:44
	Конечно классно получилось, но на сайте он предлагает свои web услуги в виду создания сайта и прочее. У нас тут чел был, который в одной теме просил сделать макет, в другой предлагал продать макет. 1