改變人體的上滾動

我想實現這個結果的背景顏色，你可以看到它使用的精闢這裏 http://www.formuswithlove.se 改變人體的上滾動

我想，當我到達稱爲#about特定的div身體背景改變。

你能幫我嗎？

非常感謝， F.

2013-03-15 Federico

歡迎來到StackOverflow。將一些你的代碼添加到問題中，並告訴我們你卡在哪裏。（document）.ready（function（）{ var scroll_pos = 0; $（document）.scroll（function（）{ scroll_pos = $（this）（ – 2013-03-15 18:29:08

）謝謝你D.-我嘗試使用這個Javascript： $ .scrollTop（）; if（scroll_pos> 800）{（body「）.css（'background-color'，'white'）; } else {{」body「）.css（'background 'color'，'red'）; } }）; }）; 問題：答：如果我使用jQuery，Mooscroll將不起作用; B）顏色只出現在頁面的邊界上; C）我很樂意使用div增量而不是px。 – Federico 2013-03-15 18:38:26

你可以做它的基礎上滾動，沒有任何的jQuery插件偏移

$(window).scroll(function(){ 
    if($(window).scrollTop()>500){ 
     $('body').addClass('redBg') 
    }else{ 
     $('body').removeClass('redBg') 
    } 
})

或使用類似jQuery.inview

$("#someElement").bind('inview', function(e, isInView) { 
    if(isInView){ 
    $('body').addClass('redBg') 
    }else{ 
     $('body').removeClass('redBg') 
    } 
});

來源

2013-03-15 18:34:56

我應該在我的樣式表中放置類似.redBg {background-color：red}的類嗎？ – Federico 2013-03-15 19:23:50

兩者都是很好的解決方案。我相信他/她可以爲第一個解決方案創建一些模糊集合，這些集合將按照時間間隔進行配對。吸氣劑將返回與當前值對應的Fuzzy集合映射的顏色。對於第二種解決方案，我還會創建映射到div（s）的模糊集，以便更改顏色。無論如何，我已經提高了你的答案。 – 2013-03-15 19:25:06

@Frederico是:) – 2013-03-18 00:29:04

這裏是一個讓你開始的基本例子。它在Firefox，Chrome和IE 9中測試過 - 但未在Safari中測試過。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style> 
body{ 
    margin:0; 
    padding:0; 
    background:white; 
} 
div{ 
    width:100%; 
    height:1600px; 
} 
</style> 
<script type="text/javascript"> 
var section = { 
    sections: [ 
     'section1', 
     'section2', 
     'section3' 
    ], 

    sectionOffset: {}, 

    sectionBackground: { 
     'section1': 'rgb(0, 0, 0)', 
     'section2': 'rgb(132, 132, 132)', 
     'section3': 'rgb(255, 255, 255)' 
    }, 

    currentSection: null 
} 

window.onload = function() 
{ 
    var looplen = section.sections.length; 

    for(var i = 0; i < looplen; ++i) 
    { 
     section.sectionOffset[section.sections[i]] = document.getElementById(section.sections[i]).offsetTop; 
    } 

    setTimeout("initialBackgroundChange()", 50); 
} 

window.onscroll = function() 
{ 
    tryBackgroundChange(); 
}; 

function tryBackgroundChange() 
{ 
    var looplen = section.sections.length, 
     match, 
     backgroundColor; 

    for(var i = 0; i < looplen; ++i) 
    { 
     if(pageYOffset >= section.sectionOffset[section.sections[i]]) 
     { 
      match = section.sections[i]; 
     } 
    } 

    if(match != section.currentSection) 
    { 
     section.currentSection = match; 
     changeBackground(); 
    } 
} 

function changeBackground() 
{ 
    var cbc, // Current background-color 
     tbc, // Target backgrounc-color 
     ri, // Red incrementation 
     gi, // Green incrementation 
     bi, // Blue incrementation 
     rgb, // Temporary color from cbc to tbc 
     smoothness = 20; // Higher is smoother 

    cbc = getStyle(document.body, 'background-color'); 
    cbc = cbc.substr(4, cbc.length-5); 
    cbc = cbc.split(", "); 

    tbc = section.sectionBackground[section.currentSection]; 
    tbc = tbc.substr(4, tbc.length-5); 
    tbc = tbc.split(", "); 

    ri = (tbc[0] - cbc[0])/smoothness; 
    gi = (tbc[1] - cbc[1])/smoothness; 
    bi = (tbc[2] - cbc[2])/smoothness; 

    for(var i = 1; i <= smoothness; ++i) 
    { 
     rgb = [ 
      Math.ceil(parseInt(cbc[0]) + (ri * i)), 
      Math.ceil(parseInt(cbc[1]) + (gi * i)), 
      Math.ceil(parseInt(cbc[2]) + (bi * i)) 
     ]; 

     setTimeout("document.body.style.backgroundColor = 'rgb(" + rgb.join(",") + ")'", i * (240/smoothness)); 
    } 
} 

function initialBackgroundChange() 
{ 
    if(pageYOffset == 0) 
    tryBackgroundChange(); 
} 

function getStyle(elem, name) 
{ 
    if (document.defaultView && document.defaultView.getComputedStyle) 
    { 
     name = name.replace(/([A-Z])/g, "-$1"); 
     name = name.toLowerCase(); 
     s = document.defaultView.getComputedStyle(elem, ""); 
     return s && s.getPropertyValue(name); 
    } 

    else if (elem.currentStyle) 
    { 
     if (/backgroundcolor/i.test(name)) 
     { 
      return (function (el) 
      { // get a rgb based color on IE 
       var oRG=document.body.createTextRange(); 

       oRG.moveToElementText(el); 

       var iClr=oRG.queryCommandValue("BackColor"); 

       return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+ 
         ((iClr & 0xFF0000)>>16)+")"; 
      })(elem); 
     } 

     return elem.currentStyle[name]; 
    } 

    else if (elem.style[name]) 
    { 
     return elem.style[name]; 
    } 

    else 
    { 
     return null; 
    } 
} 

</script> 
</head> 

<body> 

<div id="section1"></div> 

<div id="section2"></div> 

<div id="section3"></div> 

</body> 
</html>

來源

2013-03-15 21:20:48 Mark

改變人體的上滾動

回答

相關問題