0

这是我的程序中的一些 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) 更改为(body2)。image2但是，当我启动程序时，显示的唯一图像是image2滚动时没有任何变化。任何帮助将不胜感激，在此先感谢！

4

2 回答 2

0

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

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

  • 高度：文档总高度（偏移 50% = 高度/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
    // 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>

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

于 2020-07-29T17:36:04.163 回答
0

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

于 2020-07-30T15:23:33.097 回答