滚动效果 - 滚动时固定的“阻塞”容器发生变化

Question

我想实现在滚动的最后阶段发生变化的固定容器的效果。我不知道如何专业地称呼它，很抱歉没有合适的词。 其实应该怎么称呼呢？ :)

我的意思是这样的：https://media.giphy.com/media/26gsscmNiRJW039XG/source.gif 效果可以在UX London页面http://2016.uxlondon.com/@

上实时看到

我对 JS 不是超级熟练，但如果你能分享任何具有类似效果的教程或示例，那就太棒了。

Answer 1

我相信您可能会为此目的使用此示例：

https://codepen.io/Funsella/pen/yLfAG

js: $( window ).ready(function() {

var wHeight = $(window).height();

$('.slide')
  .height(wHeight)
  .scrollie({
    scrollOffset : -50,
    scrollingInView : function(elem) {

      var bgColor = elem.data('background');

      $('body').css('background-color', bgColor);

    }
  });

});