Question

我正在使用脚本来显示＆＃34;并且＆＃34;隐藏＆＃34;网站上某些位置的元素。我不喜欢这样一个事实，即我依靠设定的位置，并希望有一些更有活力的东西。如果用户调整窗口大小，例如此脚本将停止工作..

$(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/

使用此脚本的部分是＆＃34;我们做什么＆＃34;和＆＃34;与我们合作＆＃34; （标题用红色框括起来。）

任何有关更改此脚本的指导都将受到赞赏......

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

固定位置，在某些高度显示/隐藏

1 个答案: