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

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