要素がスクロールして行を超えたときに要素の CSS プロパティを変更する

debugcn 投稿 Dev

ウェルシピーター

私は Web サイトで作業しています。この Web サイト内にscrollは、fixed位置があり、ユーザーとともにスクロールするアイコンがあります。ウェブサイトの二重トーンのデザインのため、このアイコンが明るい背景から暗い背景に変わると色が変わるようにしたいと思います。小さな例:

ご覧のとおり、scrollテキストは暗い背景に白です。ただし、白い側にスクロールすると、scrollテキストが暗くなるようにしたいと思います。

私がやろうとしたことは、waypointsライブラリを使用してすべてのライトセクションをウェイポイントにしてから、次のように色を変更することです。

$('.light').waypoint(function(direction) {
    $(".scroll").find('span').css('color', '#000');
});

ただし、これは、ユーザーが.light要素の下部に到達したときにのみアクティブになります。

これをよりスムーズに行う方法はありますか? ありがとう。

編集などはコメントで尋ね、ここcodepenです：https://codepen.io/anon/pen/ZyYBKM

ジフス

もちろん、これは可能です。この効果を得るには、オフセットを設定する必要があります。この場合、オフセットは 100% になります。

更新されたコード:

$('.light').waypoint({
  handler: function(direction) {
    if(direction == "down") {
     $(".scroll").find('div').css('background', '#252A2F');
     $(".scroll").find('span').css('color', '#252A2F');
    } else {
      // Scrolling up, reverse the process
     $(".scroll").find('div').css('background', '#ffffff');
     $(".scroll").find('span').css('color', '#ffffff');
    }
  },
  offset: '100%'
});
$('.dark').waypoint({
  handler: function(direction) {
    if(direction == "down") {
     $(".scroll").find('div').css('background', '#ffffff');
     $(".scroll").find('span').css('color', '#ffffff');
    } else {
      // Scrolling up, reverse the process
     $(".scroll").find('div').css('background', '#252A2F');
     $(".scroll").find('span').css('color', '#252A2F');
    }
  },
  offset: '100%'
});

コードペンへのリンク

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]