浏览器滚动条下拉时 悬浮块 依据 main 里面的内容 改变

浏览器滚动条下拉时 悬浮块 根据 main 里面的内容 改变
HTML代码

<div id="main" style="width:1000px; height:2000px; background:#eee; margin:0 auto;">

	<div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>

	<div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>

</div>

<div id="tbox">

	<ul>

		<li><a href="#tag_cmt">aaa</a></li>

		<li><a href="#tag_about">bbb</a></li>

		<li id="idea" onclick="javascript:window.open('#','_blank')"></li>

		<li id="online_service" onclick="javascript:window.open('#','_blank')"></li>

	</ul>

	<dl>

		<dd>xxx</dd>

		<dd id="gotop"><a href="javascript:void(0)"></a></dd>

	</dl>

</div>

JS代码

$("#tbox ul li").hover(function() {

$(this).css("background-color","#e2e2e2");

},function(){

$(this).css("background-color","#ffffff");

});

------解决思路----------------------
没看懂啊~~
------解决思路----------------------
你的标题和描述也太乱了点

<div id="main" style="width:1000px; height:2000px; background:#eee; margin:0 auto;">
    <div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>
    <div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>
</div>
<div id="tbox">
    <ul>
    </ul>
    <dl>
        <dd>xxx</dd>
        <dd id="gotop"><a href="javascript:void(0)"></a></dd>
    </dl>
</div>
js:
$('#main').children().each(function(i,item){
    $("#tbox").find('ul').append($('<li>').html($(item).html()));
});
$("#tbox ul li").hover(function() {
$(this).css("background-color","#e2e2e2");
},function(){
$(this).css("background-color","#ffffff");
});
------解决思路----------------------

<div id="main" style="width:1000px; height:2000px; background:#eee; margin:0 auto;">

    <div id="tag_cmt" style="width:1000px;height:1000px; background:#669900;">aaa</div>

    <div id="tag_about" style="width:1000px;height:1000px; background:#F90; margin:0 auto;">bbb</div>

</div>

<div id="tbox" style="position:fixed;bottom:0px;right:0px">

    <ul>

        <li><a href="#tag_cmt">aaa</a></li>

        <li><a href="#tag_about">bbb</a></li>

        <li id="idea" onclick="javascript:window.open('#','_blank')"></li>

        <li id="online_service" onclick="javascript:window.open('#','_blank')"></li>

    </ul>

    <dl>

        <dd>xxx</dd>

        <dd id="gotop"><a href="javascript:void(0)"></a></dd>

    </dl>

</div>

<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>

<script>

    var bTop, viewHeight, sTop, isStrict = document.compatMode == 'CSS1Compat';

    $(function () {

        bTop = $('#tag_about').offset().top;

        viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight

        $(window).resize(function () { viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight }); //窗体改变重新获得视窗高度

        $(window).scroll(function () {

            sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

            $('#tbox li:eq(1)').css('background-color',sTop + viewHeight >= bTop?'#e2e2e2':'#ffffff');

        });

    });

</script>

这种效果？？
------解决思路----------------------

<div id="main" style="width:300px; height:2000px; background:#eee; margin:0 auto;">

    <div id="tag_cmt" style="width:300px;height:25%; background:#669900;">aaa</div>

    <div id="tag_about" style="width:300px;height:25%; background:#F90; margin:0 auto;">bbb</div>

    <div id="tag_cmt1" style="width:300px;height:25%; background:#669900;">CCC</div>

    <div id="tag_about1" style="width:300px;height:25%; background:#F90; margin:0 auto;">DDD</div>

</div>

<div id="tbox" style="position:fixed;bottom:0px;right:0px">

    <ul>

        <li><a href="#tag_cmt">aaa</a></li>

        <li><a href="#tag_about">bbb</a></li>

        <li><a href="#tag_cmt1">CCC</a></li>

        <li><a href="#tag_about1">DDD</a></li>

        <li id="idea" onclick="javascript:window.open('#','_blank')"></li>

        <li id="online_service" onclick="javascript:window.open('#','_blank')"></li>

    </ul>

    <dl>

        <dd>xxx</dd>

        <dd id="gotop"><a href="javascript:void(0)"></a></dd>

    </dl>

</div>

<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>

<script>

    var bTop, viewHeight, sTop, isStrict = document.compatMode == 'CSS1Compat';

    $(function () {

        aTop = $('#tag_cmt').offset().top;

        bTop = $('#tag_about').offset().top;

        cTop = $('#tag_cmt1').offset().top;

        dTop = $('#tag_about1').offset().top;

//alert(bTop);

        viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight

//alert(viewHeight );

        $(window).resize(function () { viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight }); //窗体改变重新获得视窗高度

        $(window).scroll(function () {

            sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

  $('#tbox li').css('background-color','#ffffff');

if(sTop + viewHeight > dTop){

 

 $('#tbox li:eq(3)').css('background-color',sTop + viewHeight > dTop?'#e2e2e2':'#ffffff');

} else if(sTop + viewHeight > cTop && sTop + viewHeight <= dTop ){

 

  $('#tbox li:eq(2)').css('background-color',sTop + viewHeight >= cTop?'#e2e2e2':'#ffffff');

}else if(sTop + viewHeight > bTop && sTop + viewHeight <= cTop){

  

  $('#tbox li:eq(1)').css('background-color',sTop + viewHeight >= bTop?'#e2e2e2':'#ffffff');

}else if(sTop + viewHeight <= bTop){


         $('#tbox li:eq(0)').css('background-color',sTop + viewHeight >= aTop?'#e2e2e2':'#ffffff');

}

   

          

          

           

        });

    });

</script>