时间戳

首页 > 解决方案 > 在滚动时更改背景颜色

jquery - 在滚动时更改背景颜色

问题描述

我将此javascript与colors.js结合使用，可更改滚动时的背景颜色。这很好用，我唯一想做的是，一旦下一个 div 出现，淡入淡出就已经完成。

我的代码笔示例；当您开始滚动背景时，背景会慢慢从白色变为黑色，但我希望它在#two 部分出现在底部时已经完全变黑。

代码笔： https ://codepen.io/pixelarchitect/pen/PxBmXB 

var sections = [];
var sectionsYStart = [];
var activeSection = 0;

var pageInit = function() {
  sections = [];
  sectionsYStart = [];
  $("section").each(function(i, v) {
    sections[i] = v;
    sectionsYStart[i] = $(v).offset().top;
  });
};

var ChangeColorOnScroll = function() {
  var scroll = $(window).scrollTop();
  scrollColors(scroll, $("body"), ["#FFFFFF", "#000000"]);
}

var scrollColors = function(scroll, el, colors) {
  // which of all the sections, are we in between?
  var z = 0,
    seclen = sections.length;
  for (var i = 0; i < seclen; i++) {
    if (scroll > sectionsYStart[i]) {
      z = i;
    }
  }
  activeSection = z;

  scroll_pos = scroll;
  var animation_begin_pos = sectionsYStart[z]; //where you want the animation to begin
  var animation_end_pos = sectionsYStart[z + 1]; //where you want the animation to stop
  var beginning_color = $.Color(colors[z]);
  var ending_color = $.Color(colors[z + 1]);

  if (scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos) {
    var percentScrolled = scroll_pos / (animation_end_pos - animation_begin_pos);
    if (percentScrolled > 1) {
      percentScrolled = percentScrolled - z;
    }
    var newRed = beginning_color.red() + ((ending_color.red() - beginning_color.red()) * percentScrolled);
    var newGreen = beginning_color.green() + ((ending_color.green() - beginning_color.green()) * percentScrolled);
    var newBlue = beginning_color.blue() + ((ending_color.blue() - beginning_color.blue()) * percentScrolled);

    var newAlpha = beginning_color.alpha() + ((ending_color.alpha() - beginning_color.alpha()) * percentScrolled);

var newColor = new $.Color(newRed, newGreen, newBlue, newAlpha);
el.animate({
  backgroundColor: newColor
}, 0);
  } else if (scroll_pos > animation_end_pos) {
    el.animate({
      backgroundColor: ending_color
    }, 0);
  } else if (scroll_pos < animation_begin_pos) {
    el.animate({
      backgroundColor: beginning_color
    }, 0);
  } else {}

};

$(function() {
  pageInit();
  $(document).scroll(ChangeColorOnScroll);
  $(window).resize(pageInit);
});

如果有人还可以帮助我在滚动时更改文本的颜色，那将是一个不错的额外功能

标签： jquerycsscolors

解决方案

您可以为您的 animation_end_pos 添加一个偏移量来完成您想要的

scroll_pos = scroll;
  var animation_begin_pos = sectionsYStart[z]; //where you want the 
animation to begin
  var animation_end_pos = sectionsYStart[z + 1] - $(window).height() - 50; 
//where you want the animation to stop
  console.log($(window).height() - 50);

推荐阅读