私のウェブサイトには、ナビゲーションに役立つ小さな h2 のサイドバーがあります。これはホームページでは問題なく機能しますが、写真が画面全体に表示されないページでは機能しません。白い背景に白いテキストを下にスクロールすると、テキストが読めなくなります。div (ページの 35%) を超えてスクロールすると、テキストの色が白から黒に変わる方法はありますか?
ここにいるこの男は、ロゴの svg で同様のことをしているようです。
ありがとうございました
以前にjQueryウェイポイントを使用して効果を上げました。使い方は非常に簡単です。物事が実行されるポイントを指定し、そこまでスクロールすると実行されます。ここで説明しているものと同様の効果を使用しました。
次のJS Fiddleを試してください...
http://jsfiddle.net/arunberti/uMPuW/39/
$(document).ready(function () {
var $scrollingDiv = $("#hdr");
$(window).scroll(function () {
$scrollingDiv.stop()
.animate({
"marginTop": ($(window).scrollTop() + 0) + "px"
}, "slow");
$scrollingDiv.css("color", (($(window).scrollTop() / $(document).height()) > 0.35) ? "orange" : "");
});
});