Как менять оформление блока при прохождении блоков?

Question

[Anarchy]

Подскажите как сделать так, чтобы после прокрутки определенных блоков плавающее меню меняло оформление?
https://jsfiddle.net/ekbhr6ya/9/

Answer 1

[Andrew]

var $nav = $(".my_menu");
var sect1 = $('#section1').height();
$( window ).scroll(function() {
if ($(this).scrollTop() > sect1) {
        $nav.css('background','black'); //что угодно 
      }
});

по такому же принципу для любого блока. Т.е. Как только проскраливаешься до высоты этого блока - че-то там меняется.

Comments

[Anarchy]

не работает

[Andrew]

Anarchy, лол. Так я не под ваш пример писал, а в общем.
Подставьте свои классы(меню) и айди(секции) и пробуйте.

[Anarchy]

Andrew, само собой я подставил https://jsfiddle.net/ekbhr6ya/17/

[Andrew]

Anarchy,
Поменяйте $this на $(this)
P.S. Там еще можно консоль открыть.

[Anarchy]

Спасибо!

Answer 2

[Иван]

Ну так банально высчитывайте высоту блоков и сравнивайте с текущей прокруткой. Для сравнения можно погуглить как делается infinity scroll - логика таже.

Comments

[Anarchy]

Высота меняется

[Иван]

Anarchy, ну так какая разница. Смотрите текущую прокрутку, а затем методом сложения высот блоков высчитывайте какой сейчас видно. Вешаете на onScroll и вперед.

Answer 3

[Anton fon Faust]

Повесить обработчик на событие scroll, если window.scrollTop >= yourSpecificBlock.top сделать yourMenuElement.classList.add('newViewClass')