想要在滚动到特定元素时更改导航颜色

Question

I want to change the navigation bar colour when the 'main' section of my site is scrolled to.

At the moment I have it changing colour but not at that specific section. It needs to change at that section due to the responsive design of the site.

Here is a basic jsfiddle example: http://jsfiddle.net/Forresty/8ottpo6x/1/

Here is the code:

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');
        }
    });

I tried the following javascript also:

var main = $('main');

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

This didn't work at all.

Any help would be highly appreciated.

Thanks.

Answer 1

You can get the offset of element by $('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');
    }
});