javascript - 固定位置，在特定高度显示/隐藏

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/

使用这个脚本的部分是“what we do”和“work with us”(红框内的标题)。

任何关于更改此脚本的指导将不胜感激...

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