一个右下角浮动窗口的问题

Question

右下角浮动窗口

Answer 1

<div style="position: fixed; bottom: 50px; right: 0; width: 140px;height: 40px;background-color: blue; "></div>

Answer 2

你要不要兼容ie6，如果不要一个position:fixed;bottom:50px搞定。。
如果要兼容ie6那麻烦好多，我以前写过，不过赶工出来的，你拿去改改。我的这个是网页面滚动一定距离后div才开始贴着页面边上滚动。现在很多广告就是这样的啦。
//自动调整位置 功能函数。配合Yjq_scroll_flow使用
function Yjq_onsroll_fit(_selector,_x,_y){
typeof(_x)!='undefined'?_x=_x:_x="left"
typeof(_y)!='undefined'?_y=_y:_y="bottom"
if(_y=="bottom"){
flow_top=$(document).scrollTop()+$(window).height()-$(_selector).height()-3+"px"
}else{
flow_top=$(document).scrollTop()+_y-3+"px"
}
if(_x=="left"){
flow_left=$(window).width()-$(_selector).width()-3+"px"
}else{
flow_left=_x-3+"px"
}
$(_selector).css({"top":flow_top,"left":flow_left})
}
/*滚动时适应始终底端
*@param _x 上偏移坐标
*@param _y 右偏移坐标，
*@param _allow window滚动条允许滚动多少后才开始执行
*author:yukon12345 2013-12-06
*/
function  Yjq_scroll_flow(_selector,_x,_y,_allow){
typeof(_x)=='undefined'?x="left":0;
typeof(_y)=='undefined'?_y="bottom":0;
var flow_top;
var flow_left;
if(_y=="bottom"){
flow_top=$(document).scrollTop()+$(window).height()-$(_selector).height()-3+"px"
}else{
flow_top=$(document).scrollTop()+_y-3+"px"
}
if(_x=="left"){
flow_left=$(window).width()-$(_selector).width()-3+"px"
}else{
flow_left=_x-3+"px"
}
$(_selector).css({"top":flow_top,"left":flow_left})
$(_selector).show();//$(window).resize(function() {Yjq_onsroll_fit(_selector)});
if($.browser.msie){ window.onscroll=function (){
if(_allow<$(document).scrollTop())
{Yjq_onsroll_fit(_selector,_x,_y-_allow)}
   if($(document).scrollTop()<10&&_y!="bottom"){
   $(_selector).css({"top":30});
   }
  }
}else
{
$(document).scroll(function (){
if(_allow<$(document).scrollTop())
Yjq_onsroll_fit(_selector,_x,_y-_allow)
if($(document).scrollTop()<10&&_y!="bottom"){
   $(_selector).css({"top":35});
   }
})}
}//scroll

Answer 3

<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script language="javascript">
    function ShowMessage(width,height,bottom) {
        typeof bottom=='undefined'?bottom=50:0;
        var TopY=0;//初始化元素距父元素的距离
        $("#mymessage").css("width",width+"px").css("height",height+"px");//设置消息框的大小
        $("#mymessage").slideDown(1000);//弹出
        $("#message_close").click(function() {//当点击关闭按钮的时候
            if(TopY==0){
                $("#mymessage").slideUp(1000);//这里之所以用slideUp是为了兼用Firefox浏览器
            }
            else
            {
                $("#mymessage").animate({top: TopY+height}, "slow", function() { $("#mymessage").hide(); });//当TopY不等于0时  ie下和Firefox效果一样
            }
        });
        $(window).scroll(function() {
            $("#mymessage").css("top", $(window).scrollTop() + $(window).height() - $("#mymessage").height()-bottom);//当滚动条滚动的时候始终在屏幕的右下角
            TopY=$("#mymessage").offset().top;//当滚动条滚动的时候随时设置元素距父原素距离
        });
    }
    $(function(){
        ShowMessage(252,166);
    })
</script>
<style type="text/css">
    #mymessage{
        right: 0px;
        margin-bottom:0px;
        bottom: 50px;
        position: absolute;
        z-index: 999;
        display:none;
    }
</style>
<div id="mymessage">
    <a id="message_close" title="点击关闭" href="javascript:void(0);"><div id="mes_close" style="background-image:url(tpl/window/top.jpg); width:252px; height:22px; background-repeat:no-repeat;"></div></a>
    <a href="index.php?c=pro&a=show&id=<?=$rs[links]?>" target="_blank" style="text-decoration: none;">
        <table width="250" height="144" border="0" cellpadding="0" cellspacing="0" style="background-image:url(tpl/window/moban.jpg); background-repeat:no-repeat;">
            <tr>
                <td height="30" align="center" style="color:#304759; font-size:14px; font-weight:bold"><?=$rs[title]?></td>
            </tr>
            <tr>
                <td align="left" valign="top"><table width="252" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="98" align="center" style="text-align:center; padding-left:5px"><img src="<?=$rs[picurl]?>" width="80" height="80" border="0" /></td>
                        <td width="152" align="left" valign="top" style="color:#304759; font-size:12px;">    <?=$rs[content]?></td>
                    </tr>
                </table></td>
            </tr>
        </table>
    </a>
</div>
 <div style="height: 2500px"></div>
原来有了代码啊，我给你函数加了个bottom，然后css里bottom设置50px就好了

Answer 4

感谢yukon12345兄弟帮忙，谢谢！