Waypoints.js 中的 'Offset' 背景图像未正确更改

Question

这是我程序中的一些 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;
}

我正在尝试将背景图片从 image1（正文）更改为 image2（正文 2），同时向下滚动页面 50%。但是，当我启动该程序时，唯一显示的图像是 image2 并且在我滚动时没有任何变化。任何帮助将不胜感激，提前致谢！

Answer 1

我尝试使用 waypoints，但我似乎无法使其正常工作（它在 Chrome 上为我提供了不可靠的结果）。

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

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

就像这个例子（运行代码片段）：

/**
 * 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
    // 
    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>

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

Answer 2

其实我已经找到问题了。我需要做的就是将 offset 百分比设置为负值。

Waypoints.js 中的 'Offset' 背景图像未正确更改

Background image not changing properly with 'Offset' in Waypoints.js

javascript

css

jquery

jquery-waypoints

waypoint