在特定高度显示/隐藏的固定位置
问题描述:
我正在使用脚本在网站上的某些位置“显示”和“隐藏”元素。我不喜欢这样的事实,即我依靠既定的立场,并希望更有活力的事情。如果用户改变,例如,该脚本将停止工作的窗口..在特定高度显示/隐藏的固定位置
$(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/
其使用该脚本的部分是“我们做什么”和“工作与我们“(标题用红色方框包裹)。
更改此脚本的任何指导,将不胜感激......
答
这里是一个动态的解决方案。当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;
}
我我不会放弃确定试图做什么。卷轴与窗口大小的大小有什么关系? – 2014-08-28 16:52:37