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

解决方案 »

  1.   


    大概是这种效果。
    滑动浏览器滚动条  出现bbb 时,悬浮框的bbb 能用:hover 背景色。请给出大概思路,或者直接贴代码。谢谢! 
      

  2.   

    你的标题和描述也太乱了点<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");
    });
      

  3.   

    http://gz.altmi.com/archives/67/
    你看这里能不能提供点思路
      

  4.   

    <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>这种效果??
      

  5.   

    是的。 但 出现CCC  DDD 的时候怎么办呢?正在研究
    还有。开始应该 AAA灰的。
      

  6.   


    刚找到了这个效果。
    看不懂源码shop.vip              shop.com 
      

  7.   

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

  8.   

    发现自己数学越来越烂了,呵呵。。想个对象在可视范围内的判断搞了几分钟,╮(╯▽╰)╭<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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 id="Div1" style="width:1000px;height:1000px; background:#00f; margin:0 auto;">CCC</div>
        <div id="Div2" style="width:1000px;height:1000px; background:#000; margin:0 auto;">DDD</div>
    </div>
    <div id="tbox" style="position:fixed;bottom:0px;right:0px"><ul></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 viewHeight,isStrict = document.compatMode == 'CSS1Compat'
        , arrTops = [], i, nodeLength = 0, sTop, sBottom;
        $(function () {
            var ul = $('#tbox ul:eq(0)');
            viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight
            $('#main').children().each(function (i, el) {
                arrTops[i] = { y: $(this).offset().top }; //记录对象y
                arrTops[i].yb = $(this).outerHeight() + arrTops[i].y; //记录对象y+高度
                ul.append('<li>' + this.innerHTML + '</li>');
            });
            nodeLength = ul.children().size();
            $(window).resize(function () { viewHeight = document[isStrict ? 'documentElement' : 'body'].clientHeight }); //窗体改变重新获得视窗高度
            $(window).scroll(function () {
                sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop)
                sBottom = sTop + viewHeight;
                for (i = 0; i < nodeLength; i++)
                    ul.children(':eq(' + i + ')').css('background-color'
                    , (sTop >= arrTops[i].y && sTop <= arrTops[i].yb)
                    || (sBottom >= arrTops[i].y && sBottom <= arrTops[i].yb)
                    || (sTop >= arrTops[i].y && sBottom <= arrTops[i].yb)
                    ? '#e2e2e2' : '#ffffff');
            });
            $(window).trigger('scroll');
        });
    </script>