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

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(每个页面都不同)。这将导致大量的路点处理程序被绑定(bind)，我认为这不是理想的。

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 个事件处理程序的解决方案，所以我希望有人有更好的解决方案(尽管我我开始怀疑了)。

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

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

查看-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;
}