Question

我正在制作一个大卷轴页面。而我的导航系统是固定的。我想在导航到达我页面上的特定部分时更改颜色（从黑色到白色，反之亦然）。这是因为它们中的一些是白色的，而其中一些是黑色的 - 我想对比一下。我已经在css中创建了一个应该切换的课程。但是我在使用我的代码时遇到了困难。看看它：

https://jsfiddle.net/Lp27vuu4/

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        $('nav').toggleClass('light-mode',
            //add 'light-mode' class when div position match or exceeds else remove the 'light-mode' class.
            scroll >= $('.section2').offset().top
        );
    });

    //trigger the scroll
    $(window).scroll();//ensure if you're in current position when page is refreshed

body {
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  position: fixed;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.light-mode {
    color: #fff;
}

.section1 {
   width: 100%;
   height: 400px;
   background-color: #fff;
   color: #000;
   padding: 100px;
}

.section2 {
   width: 100%;
   height: 400px;
   background-color: #000;
   color: #fff;
   padding: 100px;
}

.section3 {
   width: 100%;
   height: 400px;
   background-color: #fff;
   color: #000;
   padding: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <h3>navigation links</h3>
</nav>
<section class="section1">
    section 1
</section>
<section class="section2">
    section 2
</section>
<section class="section3">
    section 3
</section>

结论：

我的导航默认为深色。当我到达黑暗部分时，我想告诉jQuery将课程.light-mode添加到<nav>。但是当用户离开该部分时，我希望它恢复正常（因此删除该类）。在我的解决方案中，它有问题：

当用户不在该部分时，它似乎没有回到原来。
当用户从上到下滚动页面时，会添加该类。它在.offset().top上查看。我想让它更专业，更普遍。我希望在每个部分在屏幕上时添加此类，无论它是从底部还是顶部。

Answer 1

如果scroll + h3的偏移量大于该部分的偏移量，则要添加该类，如果scroll + h3的偏移量更大，则删除它而不是该部分的偏移+它的高度。

看看这个：https://jsfiddle.net/Lp27vuu4/4/

Answer 2

Waypoints是一个流行的插件，用于触发滚动事件。

http://imakewebthings.com/waypoints/

将航路点js文件放在项目中并链接到它。然后在jQuery文件中执行以下操作

def get_content(request, address):
    try:
        content = Content.objects.get(address=urllib.unquote(address))
    except:
        return Response(status=status.HTTP_404_NOT_FOUND)

    if request.method == 'GET':
        serializer = ContentSerializer(content)
        return Response(serializer.data)

当特定部分在屏幕上时，toggleClass

2 个答案: