Css 可更改背景颜色的固定位置菜单

我继承了一个项目，对如何解决某个特定问题有一些疑问

有一个固定的左副导航，如下所示。当用户滚动时，有6-10个不同的垂直堆叠的“部分”。顶部有一个背景图像（如下所示），而其余部分在白色和各种颜色之间交替，例如：

section 1: background-image
section 2: background-color: white
section 3: background-color: blue
section 4: background-color: white
section 5: background-color: green
... etc

客户希望菜单项根据每个项目在给定时间结束的背景更改颜色（因此，当您滚动时，它会逐项更改）。如图所示，当我从标题滚动到第一个内容部分时，我将移动到白色背景，因此我的菜单是白色背景上的白色文本（第五个菜单项将移动到白色背景）

当一个特定的div滚动到一个特定的位置时，从事这项工作的人最初使用jquery航路点触发对菜单项颜色的全面更改。这基本上是可行的——但只有当整个部分滚动到菜单顶部时（意味着菜单项在最后一个菜单项滚动到该部分之前是白色的）

你有没有想过如何处理这件事

[编辑以添加]

我想我在上面已经说得很清楚了。我们已经在使用jquery航路点了。问题是，除非我在每个菜单项的每个偏移处（每个页面都不同）为区段div创建一个处理程序，否则无法在每个菜单项上触发航路点（主要是因为菜单项不是内容节点祖先树的一部分，这禁止我在上下文中传递给航路点处理程序）。这将导致大量航路点处理程序被绑定，我认为这并不理想

---

我所描述的。滚动时，菜单项会一次全部更改。当您从标题向下滚动到第一个内容部分时，您可以看到这是一个问题。菜单项是白色的。第一部分内容的背景也是如此。因此，在到达航路点之前，菜单实际上是隐藏的。我想做的是改变每个菜单项的颜色，因为它“进入”或“退出”一个特定的内容分区。我想我可以在window.scroll上这样做，但这似乎相当昂贵。我希望我在航路点上遗漏了什么，或者有更好的方法

嗯，在页面上设置一些ID并将其用作何时触发背景更改的锚定并不太困难

假设您有这样一个HTML结构：

<header>
  ...
</header>
<div id="getting-started" data-background-color="lightBlue">
...
</div>
<div id="afford" data-background-color="red">
...
</div>
<div id="down-payment" data-background-color="green">
...
</div>
<div id="financing" data-background-color="blue">
...
</div>

...
...
...
...
...

现在你包括

（函数（$）{
$（“#入门”）.waypoint（函数（）{
var$this=$（this）；
$（'header'）.css（'background-color'），$this.data（'background-color'）；
});
})（jQuery）

请记住，这不是一个完整的解决方案，只是帮助你朝着正确的方向前进。

好吧，我就是这么做的。考虑到我每页有6-10个菜单项（所以有6-10个部分），我真的不喜欢创建36-100个事件处理程序的解决方案，所以我希望有人有一个更好的（尽管我开始怀疑它）

所以他告诉我需要发布代码，所以这里是：

HTML

---

请参阅在每个元素上设置

$.waypoint（）

函数，然后根据元素所在的位置添加/删除类。这些类应该具有更改背景颜色的CSS。如果你发布更多的代码，这会很有帮助。如果你阅读我的帖子，你会看到他们已经在使用航路点来实现这一点。问题不是如何使用航路点。航路点不符合我的要求，我建议发布一些代码。很难理解你想要完成什么，我不是这里唯一一个困惑的人。是的，我现在正在创建一个小提琴。正如我所说，完成第一阶段的人已经在用jquery waypoint做这件事了。问题是，当每个元素进入每个部分时，我需要更改文本颜色。而不是当菜单到达节时，或者当div到达菜单时。我已经尝试过使用偏移量来尝试并触发此操作，但使用航路点无法传递不属于祖先树的内容的上下文。编辑问题以包含更多上下文。如果可以安慰的话，您并没有真正创建36-100个事件处理程序。jQuery航路点将只使用一个滚动事件处理程序。您在内部创建的是36-100个缓存的整数，在（限制的）滚动处理程序中进行检查。它通常能维持数千年。我相信你已经用最好的方法回答了这个问题。这是相当令人欣慰的。Thx Caleb（ps-我想念波特兰硬核）。

<script type="text/javascript">
(function($) {
  $('#getting-started').waypoint(function() {
    var $this = $(this);
    $('header').css('background-color', $this.data('background-color'));
  });
})(jQuery)  
</script>

<div class="menu">
    <ul>
        <li>
            <a href='#header'>Header</a>
        </li>
        <li>
            <a href='#getting-started'>Getting Started</a>
        </li>
        <li>
            <a href='#zomglaserguns'>Laser Guns</a>
        </li>
        <li>
            <a href='#pewpew'>Pew Pew</a>
        </li>
    </ul>
</div>
<div id="header" data-menu-color-down='#fff' data-menu-color-up='#000'>
    Some header content
</div>
<div class="content">
    <div id="getting-started" data-menu-color-down='#000' data-menu-color-up='#fff'>
        some content
    </div>
    <div id="zomglaserguns" data-menu-color-down='#fff' data-menu-color-up='#000'>
        laser guns!
    </div>
    <div id="pewpew" data-menu-color-down='#000' data-menu-color-up='#fff'>
        pew pew!!!!
    </div>
</div>

var myObj = {
    menuOffsets: {},
    pageSections: [],
    init: function() {
        myObj.initMenuOffsets();
        myObj.initSections();
        myObj.initWaypoints();
    },
    initMenuOffsets: function() {
        $('.menu a').each(function() {
           var self = $(this),
               href = self.attr('href'),
               menuItemHeight = self.height();
            myObj.menuOffsets[href.substring(1, href.length)] = self.offset().top + self.height();
        });
        console.log(myObj.menuOffsets);
    },
    initSections: function() {
        var header = $('#header'),
            sections = $('.content > div');
        if(header.length) {
            myObj.pageSections.push('header'); 
        }
        sections.each(function() {
            var self = $(this);
            myObj.pageSections.push(self.attr('id'));   
        });
        console.log(myObj.pageSections);
    },
    initWaypoints: function() {
        var menuItemColor,
            key,
            i = 0,
            len = myObj.pageSections.length;

        for ( i; i < len; i++ ) {
            for ( key in myObj.menuOffsets ) {
                if( myObj.menuOffsets.hasOwnProperty( key ) ) {
                    (function ( key, i ) {
                        $('#' + myObj.pageSections[i]).waypoint(function(direction) {
                            var self = $(this);
                            menuItemColor = self.data('menuColor' + (direction === 'up' ? 'Up' : 'Down'));
                            $('.menu a[href="#' + key + '"]').css('color', menuItemColor);
                        }, { offset: myObj.menuOffsets[key] });
                    })(key, i);
                }
            }
        }
    }
};
myObj.init();

.menu {
    position: fixed;
    top: 40px;
    left: 10px;
    color: white;
}
.menu li {
    list-style-type: none;
}
.menu a {
    color: inherit;
    text-decoration: none;
}
.content {

}
#header {
    background: black;
    color: white;
    height: 200px;
    padding: 0 120px;
}
#zomglaserguns {
    background: green;
    color: #777;
}
.content div {
     min-height: 300px;  
    padding: 0 120px;
}