在特定高度顯示/隱藏的固定位置

Question

我正在使用腳本在網站上的某些位置「顯示」和「隱藏」元素。我不喜歡這樣的事實，即我依靠既定的立場，並希望更有活力的事情。如果用戶改變，例如，該腳本將停止工作的窗口..

$(window).scroll(function() { 
var scroll = $(window).scrollTop(); 
if (scroll >= 1200) { 
    $('#red-box-what').css('display', 'block'); 
} else { 
    $('#red-box-what').css('display', 'none'); 
} 
if (scroll >= 2510) { 
    $('#red-box-work').css('display', 'block'); 
} else { 
    $('#red-box-work').css('display', 'none'); 
} 
console.log(scroll); 
}) 


});  
})(jQuery); 

供參考的網站是：http://www.littlestarmedia.com/alpha/

其使用該腳本的部分是「我們做什麼」和「工作與我們「（標題用紅色方框包裹）。

更改此腳本的任何指導，將不勝感激......

Answer 1

這裏是一個動態的解決方案。當ROI div的頂部到達瀏覽器頂部時，它會更改網站的背景顏色。我希望你能夠建立基於這樣的想法：

的jsfiddle： http://jsfiddle.net/seibert_cody/sng9emjp/1/

HTML：

<div class="section"></div>  
    <div id="red" class="roi"></div> 
<div class="section"></div> 
    <div id="green" class="roi"></div> 
<div class="section"></div> 
    <div id="blue" class="roi"></div> 
<div class="section"></div> 
    <div id="yellow" class="roi"></div> 

JS：

$(document).ready(function(){ 
    var ROI = function($div, color){ 
     this.$div = $div; 
     this.color = color; 
    } 

    var rois = [ 
     new ROI($("#red"), "red"), 
     new ROI($("#green"), "green"), 
     new ROI($("#blue"), "blue"),     
     new ROI($("#yellow"), "yellow") 
    ]; 

    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     $.each(rois, function(index, roi){ 
      var $div = roi.$div; 
      var color = roi.color; 
      if (scroll > $div.position().top){ 
       $("body").css("background-color", color); 
      } 
     }); 
    }); 

}); 

CSS：

body{ 
    height: 5000px; 
} 

.section{ 
    height: 400px; 
} 

.roi{ 
    height: 50px; 
    border: 1px solid black; 
} 

#red{ 
    background-color: red; 
} 

#green{ 
    background-color: green;  
} 

#blue{ 
    background-color: blue; 
} 

#yellow{ 
    background-color: yellow; 
}