在特定高度显示/隐藏的固定位置

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; 
}