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航点的人在特定div滚动到某个位置时触发菜单项颜色的批量更改。这基本上有效 - 但只有当整个部分滚动到菜单的顶部时（意味着菜单项是白色的，直到最后一个菜单项滚动到该部分）。

有关如何处理此问题的任何想法？

Fixed position image

[编辑添加]

我以为我上面说得很清楚。我们已经在使用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个事件处理程序的解决方案，所以我希望有人有一个更好的（虽然我'我开始怀疑它。）

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

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>

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

固定位置菜单，改变背景颜色

2 个答案: