當用戶在不同彩色部分滾動時徽標圖像更改

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) { 
 

 
\t var pad = 10; 
 
\t 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) { 
 
    \t 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(); 
 
    } 
 
    
 
\t \t 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($) { 
 
\t ScrollSpy(function(theme) { 
 
    \t \t console.log(theme); 
 
    \t }); 
 
});

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>