我试图在header元素中完成几件事。首先，我想要一个jquery幻灯片设置为相对。其次，我会把我的png标志和导航链接固定在幻灯片前面。由于有些幻灯片是深色的，有些是浅色的，我需要徽标+导航链接在图像循环时更改为统一设置颜色，以便始终可以阅读。
到目前为止，我似乎可以通过循环浏览div来完成这两项任务，但由于图像是相对的，徽标+导航将是固定的，我需要固定div背景的不透明度，以在向下滚动和幻灯片向上滚动时将其不透明度从0-100更改为0-100。
由于徽标+导航的颜色有时是一种颜色，有时是另一种颜色(取决于幻灯片显示的内容)，我需要添加一个额外的回调，告诉徽标+导航在滚动时返回黑色，无论滚动开始时是什么颜色。
我在这里有一个半工作的演示。
这个演示显示了幻灯片+滚动的div不透明度。尽管他们在一起玩得不好，但他们在我的实际网站上合作得很好。
请随意拆开。谢谢
这就是您想要的？http://jsfiddle.net/MNFTT/89/
CSS：
#slideshow{
position:relative;
top:0;
left:0;
}
#slideshow ul, #slideshow li{
margin:0;
padding:0;
list-style-type:none;
}
.slideshow_item{
position:absolute;
left:0;
top:0;
list-style-type:none;
}
.slideshow_item img{
margin:0;
padding:0;
vertical-align:bottom;
}
div.fademe {
width: 100%;
position: fixed;
display: block;
height: 150px;
background: #ffffff;
z-index: 8;
}
#header-wrapper {
padding: 0;
margin: 0 auto;
}
#header {
position: fixed;
width: 100%;
height: 100px;
z-index: 9;
margin: 0 auto;
}
#header .inner {
margin: 0 auto;
padding: 0 25px 0 25px;
width: 950px;
height: 100px;
z-index: 10;
}
#header-logo {
background:url(http://img585.imageshack.us/img585/4227/xlogo.png);
width:71px;
height:51px;
margin: 0 auto;
margin-top: 31px;
background-repeat: no-repeat;
}
#navbar {
text-align: justify;
margin-top: 25px;
}
#navbar a{
font-family: "ss-bol", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000000;
}
#navbar a:hover{
font-family: "ss-bol", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #595959;
}
#navbar span {
width: 100%;
display: inline-block;
}
#page {
width: 100px;
height: 100%;
}
HTML
<div id="header-wrapper">
<div class="fademe"></div>
<div id="header">
<div class="inner">
<a href="/" title"logo"><div id="header-logo"></div></a>
<div id="navbar">
<a href="#">NEW</a>
<a href="/shop">SHOP</a>
<a href="/wine">ART</a>
<a href="/blog">BLOG</a>
<a href="#">MUSIC</a>
<a href="#">CONTACT</a>
<a href="#">ABOUT</a>
<span></span></div>
</div>
</div>
</div>
<div id="slideshow">
<ul>
<li class="slideshow_item">
<a href="#"><img src="http://img829.imageshack.us/img829/6969/newslide2.jpg" alt="persiannewyear11-hp" /></a>
</li>
<li class="slideshow_item">
<a href="#"><img src="http://img696.imageshack.us/img696/3193/newslide1.jpg" alt="holi11-hp" /></a>
</li>
</ul>
</div>
<div id="page">
TEXT FOR SCROLLING
.....
</div>
JS:
/* slideshow */
$(function(){
var slide_pos = 0;
var slide_len = 0;
slide_len = $(".slideshow_item").size() - 1;
$(".slideshow_item:gt(0)").hide();
slide_int = setInterval(function() {
slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
slide_cur.fadeOut(2000);
slide_pos = (slide_pos == slide_len ? 0 : (slide_pos + 1));
slide_cur = $(".slideshow_item:eq(" + slide_pos + ")");
slide_cur.fadeIn(2000);
}, 5000);
var divs = $('.fademe');
var navbar_a=$('#navbar a');
var navbar=$('#navbar');
divs.css('opacity', 0);
$(window).scroll(function() {
var imgH=$('.slideshow_item').height();
var percent = $(document).scrollTop()/imgH;
divs.css('opacity', percent);
var bg=Math.round(255-(percent*255));
bg=bg>0?bg:0;
var fg=255-(bg/2+128);
console.log(percent,imgH,fg);
divs.css('background-color','rgb('+bg+','+bg+','+bg+')');
navbar_a.css('color','rgb('+fg+','+fg+','+fg+')');
});
});