JQuery Waypoints を使用して、色を変更するヘッダーを作成しようとしています。関連する色で 1 ページのサイトのセクションを示すオブジェクトの配列があります (以下を参照)。
var colours = new Array(
{section: 'home', colour: '#000'},
{section: 'video-audio', colour: '#EF6E7C'},
{section: 'motion-graphics', colour: '#FBC57A'},
{section: 'graphic-design', colour: '#FFF9A9'},
{section: 'web-development', colour: '#AAD693'},
{section: 'social-media', colour: '#6D8DC9'},
{section: 'photography', colour: '#8A6FB0'},
{section: 'talent', colour: '#C57AB3'},
{section: 'contact', colour: '#000'}
);
次に、以下のスクリプトを使用して、各セクションの JQuery ウェイポイントを作成します ( <section id="...">
HTML のようにマークアップされています)。
// top bar whose background-colour is being changed
var $topBar = $('.top-bar');
var offsetNum = 0, // pixels to offset waypoints
animateTime = 300, // milliseconds to animate
fallbackColour = '#333';
// len is number of sections (length of colours array)
var len = (typeof colours == 'undefined') ? 0 : colours.length;
if (len > 1) {
for (var i = 0; i < len; i++) {
var curColour = ('colour' in colours[i]) ? colours[i].colour : fallbackColour,
curSection = ('section' in colours[i]) ? colours[i].section : 'unknown';
$('#' + curSection).waypoint(function(direction) {
if (i > 0 && i < len) {
curColour = (direction === 'down') ?
(colours[i+1].hasOwnProperty('colour') ? colours[i+1].colour : fallbackColour) :
(curColour = colours[i-1].hasOwnProperty('colour') ? colours[i-1].colour : fallbackColour);
}
// first or last waypoint
$topBar.stop().animate({backgroundColor: curColour}, animateTime);
}, { offset: offsetNum });
}
}
オブジェクトの配列と for ループを使用する代わりに、各セクションのウェイポイントを手動で作成しただけでは機能しましたが、これは多くのコードの繰り返しでした。後でセクションを追加する場合は、できるだけ変更を加えないようにしたいと考えています。
アラートを使用してデバッグしたときに私が見つけたのは、すべてのウェイポイントがi
9 (最大になる予定) と見なされていることでした。正しいi
値を各ウェイポイントに直接渡す方法はありますか、またはこれを解決するより良い方法はありますか?