Question

我希望在主要＆＃39;时更改导航栏颜色。我的网站部分滚动到。

此刻我改变颜色但不是在那个特定的部分。由于网站的响应式设计，它需要在该部分进行更改。

这是一个基本的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');
    }
});

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

1 个答案: