Waypoints.js 中的“偏移”无法正确更改背景图像答案

【问题标题】：Background image not changing properly with 'Offset' in Waypoints.jsWaypoints.js 中的“偏移”无法正确更改背景图像
【发布时间】：2020-07-29 15:05:25
【问题描述】：

这是我的程序中的一些 Javascript 和 CSS：

<script>
var $body = $('body');


$body.waypoint(function (direction) {
  if (direction == 'down') {
      $body.addClass('body2'); 
  } else{
      $body.removeClass('body2');
  }
}, { offset: '50%'});


</script>   


    
    
<style>
body {
  background-image: url("images/image1.png");
  background-repeat: no-repeat;
  background-position: 400px 200px;
  background-size: 900px 300px;
  margin-right: 400px;
  background-attachment: fixed;
}


.body2 {
  background-image: url("images/image2.png");
  background-repeat: no-repeat;
  background-position: 400px 200px;
  background-size: 900px 300px;
  margin-right: 400px;
  background-attachment: fixed;
}

当我向下滚动 50% 的页面时，我正在尝试将背景图像从 image1 (body) 更改为 image2 (body2)。但是，当我启动程序时，显示的唯一图像是image2，并且在我滚动时没有任何变化。任何帮助将不胜感激，在此先感谢！

【问题讨论】：

标签： javascript jquery css jquery-waypoints waypoint

【解决方案1】：

我尝试使用航路点，但我似乎无法让它工作（在 Chrome 上它给我的结果不可靠）。

您可以根据需要使用自己的自定义函数来处理滚动事件。您需要计算：

height：文档总高度（偏移 50% = height/2）
y: 当前滚动位置
方向：通过将 y 与上次滚动位置进行比较

就像这个例子一样（运行代码sn-p）：

/**
 * very simple on scroll event handler
 * use: Scroller.onScroll(..custom function here...)
 * custom function gets 3 parameters: y, height and direction
 */
var Scroller = {
  _initiated: 0,
  _init: function() {
    var t = this;
    t._listener = function() {
      t._scrollEvent();
    };
    window.addEventListener("scroll", t._listener);
    t.y = t.getY();
    t._initiated = 1;
  },
  _onScroll: null,
  _scrollEvent: function() {
    var t = this;
    if (!t._initiated || !t._onScroll)
      return false;
    var y = t.getY();
    t.height = document.body.scrollHeight;
    t.direction = y < t.y ? "up" : "down";
    t.y = y;
    t._onScroll(t.y, t.height, t.direction);
  },
  getY: function() {
    //for cross-browser compatability
    // https://stackoverflow.com/a/51933072/4902724
    return (window.pageYOffset !== undefined) ?
      window.pageYOffset :
      (document.documentElement || document.body.parentNode || document.body).scrollTop;
  },
  onScroll: function(fn) {
    var t = this;
    t._onScroll = fn;
    if (!t._initiated)
      t._init();
  },
  destroy: function() {
    var t = this;
    window.removeEventListener("scroll", t._listener);
    t._onScroll = null;
    t._initiated = 0;
  }
};
/**
 * global vars
 */
var $body = $("body");
// keep track of changes, to cancel unnecessary class changes
$body.classChanged = 0;
/**
 * on scroll setup
 */
Scroller.onScroll(function(y, height, direction) {
  /* to check for 50%, compare y vs. height/2 */
  if (y > height / 2 && direction == "down" && !$body.classChanged) {
    $body.addClass("body2");
    $body.classChanged = 1;
  }
  if (y < height / 2 && direction == "up" && $body.classChanged) {
    $body.removeClass("body2");
    $body.classChanged = 0;
  }
});

body {
  background-color: lightgreen;
}

.body2 {
  background-color: gold;
}


/* demo helpers...*/

div {
  float: left;
  width: 100%;
  height: 250px;
  border: 1px solid grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Sroll down below 50% to change body color...."</p>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

希望这会有所帮助，即使没有那个插件。

【讨论】：

【解决方案2】：

我实际上已经找到了问题所在。我需要做的就是将offset 百分比设置为负数。

【讨论】：