当用户在不同颜色的部分滚动时，徽标图像会发生变化

Question

尝试提供更改徽标图像的解决方案 - 用户滚动到不同颜色的区域。如此黑暗/轻盈的主题。

a）如何检测用户滚动到的部分是否为暗/亮主题。 b）将徽标图像切换到相反的调色板。

https://jsfiddle.net/atg5m6ym/6830/

$(document).ready(function() {
  $(document).on('scroll', function() {
    console.log("$(this).scrollTop()", $(this).scrollTop());
    console.log("$('section').position().top", $('section').position().top);
    if ($(this).scrollTop() >= $('section').position().top) {
      //get current active section and acquire theme pallete
      //console.log($(this));
      //console.log($(this).data("theme"))
      //yourActionHere();
    }
  })
});

section {
  background: orange;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<section data-theme="dark">test1</section>
<section data-theme="dark">test2</section>
<section data-theme="light">test3</section>
<section data-theme="dark">test2</section>
<section data-theme="light">test4</section>
<section data-theme="light">test5</section>

http://jsfiddle.net/n4pdx/289/

$(window).scroll(function() {
  var hT = $('#scroll-to').offset().top,
      hH = $('#scroll-to').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();
  console.log((hT - wH), wS);
  if (wS > (hT + hH - wH)){
    alert('you have scrolled to the h1!');
  }
});

section {
  height: 800px;
  background: red;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<section>Y</section>
<section>X</section>
<h1 id="scroll-to">I am The H1</h1>

Answer 1

请尝试以下代码。当用户在各部分之间滚动时，它会窥探滚动并调用函数。使用当前主题作为参数调用回调函数。检查代码段：

var ScrollSpy = function(changed) {

	var pad = 10;
	var offsets = [];
  var targets = [];
  var activeTarget = null;
  var changedCallback = changed || $.noop();
  
  function init() {      
    $(document.body).find("[data-theme]").map(function () {    
      var $el   = $(this);      
      return  [[$el.offset().top, $el[0]]];
    }).sort(function (a, b) { return a[0] - b[0] }).each(function () {
      offsets.push(this[0])
      targets.push(this[1])
    });
  };
  
  function activate(target) {
  	activeTarget = target;
    clear();
    changedCallback.call(target, $(target).data('theme'));
  };
  
  function clear() {
    $("[data-theme]").removeClass('active_section'); 
  };
  
  function getScrollHeight() {
    return window.scrollHeight || Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  };
  
  function spy()  {  
    var scrollTop = $(window).scrollTop() + pad;
    var scrollHeight = getScrollHeight();
    var maxScroll = pad + scrollHeight - $(window).height();
    
    if (scrollTop >= maxScroll) {
      return activeTarget != (i = targets[targets.length - 1]) && activate(i);
    }
    
    if (activeTarget && scrollTop < offsets[0]) {
      activeTarget = null;
      return clear();
    }
    
		for (i = offsets.length; i--;) {
      activeTarget != targets[i]
        && scrollTop >= offsets[i]
        && (offsets[i + 1] === undefined || scrollTop < offsets[i + 1])
        && activate(targets[i]);
    }
  };
  
  $(window).scroll(spy);
  init();
  spy();
};

jQuery(function($) {
	ScrollSpy(function(theme) {
  		console.log(theme);
  	});
});

body, html {
  padding:0;
  margin:0;
  position: relative;
}
section {
  background: orange;
  width: 100%;
  height: 300px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section data-theme="dark">
  Section #1 (Dark)
</section>

<section data-theme="dark">
  Section #2 (Dark)
</section>

<section data-theme="light">
  Section #3 (Light)
</section>


<section data-theme="dark">
  Section #4 (Dark)
</section>

<section data-theme="light">
  Section #5 (Light)
</section>


<section data-theme="light">
  Section #6 (Light)
</section>