Желание изменить цвет навигации при прокрутке к определенному элементу

Question

Я хочу изменить цвет панели навигации, когда прокручивается раздел «Главная» моего сайта.

На данный момент у меня есть изменение цвета, но не в этом конкретном разделе. Он должен измениться в этом разделе из-за гибкого дизайна сайта.

Вот основной jsfiddle пример: http://jsfiddle.net/Forresty/8ottpo6x/1/

Вот код:

HTML:

<nav class="test"></nav> 
<div class="someText"> 
    <p>......</p> 
</div> 
<main></main> 

CSS:

nav { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    height: 4.5em; 
    background: black; 
} 

.main{ 
    width: 400px; 
    height: 2000px; 
    background: gray; 
} 

.black{ 
    background: red; 
} 

Javascript:

$(window).scroll (function() { 
    var target = $(this).scrollTop(); 
     if (target >= 500) { 
      $('nav').addClass('black'); 
     }else { 
      $('nav').removeClass('black'); 
     } 
    }); 

Я пробовал следующий JavaScript также:

var main = $('main'); 

$(window).scroll (function() { 
    var target = $(this).scrollTop(); 
     if (target >= main) { 
      $('nav').addClass('black'); 
     }else { 
      $('nav').removeClass('black'); 
     } 
    }); 

Это не работает.

Любая помощь будет высоко оценена.

Спасибо.

Answer 1

Вы можете получить смещение элемента на $('element').offset().top. https://api.jquery.com/offset/

http://jsfiddle.net/1vy7ocjz/1/

var $window = $(window); 
var $main = $('main'); 
var $nav = $('nav'); 
$window.scroll(function() { 
    var target = $window.scrollTop(); 
    if (target >= $main.offset().top) { 
     $nav.addClass('black'); 
    } else { 
     $nav.removeClass('black'); 
    } 
});