具有更改背景颜色的固定位置菜单

Question

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

有一个固定的左侧子导航，如下所示。当用户滚动时，有 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

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

从事此工作的人最初使用 jquery waypoint 在特定 div 滚动到某个位置时触发对菜单项颜色的大规模更改。这基本上有效 - 但只有当整个部分滚动到菜单顶部时（意味着菜单项是白底白字，直到最后一个菜单项滚动到该部分）。

关于如何处理这个问题有什么想法吗？

[编辑添加]

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

Here is an example 我所描述的。当您滚动时，菜单项会同时更改。当您从标题向下滚动到第一个内容部分时，您可以看到问题出在哪里。菜单项是白色的。第一个内容部分的背景也是如此。因此，在到达航点之前，菜单实际上是隐藏的。我要做的是在每个菜单项“进入”或“退出”特定内容 div 时更改它的颜色。我想我可以在 window.scroll 上做到这一点，但这似乎相当昂贵。希望我在航路点上缺少一些东西，或者有更好的方法来做到这一点。

Answer 1

好的，所以我做了solve this by creating an event handler at every offset。鉴于我每页有 6-10 个菜单项（所以 6-10 个部分），我不太喜欢创建 36-100 个事件处理程序的解决方案，所以我希望有人有更好的解决方案（尽管我我开始怀疑）。

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

HTML

<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>

JS：

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();

SEE-ESS-ESS：

.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;
}

Answer 2

好吧，在页面上设置一些 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>

现在你包括jQuery Waypoints

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

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