JavaScript设置右下角悬浮窗

很多时候，我们需要设置一个dom节点到浏览器窗口的右下角。我们需要那个元素可以在窗口Scroll滚动或者变换大小resize的时候都可以保持浮动在那个位置。这个时候，我在网上看了看，发现很多框架什么啊，或者什么实例，看起来都弱爆了，看起来很复杂，但是直觉告诉我这个明显不是个麻烦事情，所以我自己看了看，终于知道了怎么用很少的代码来优雅的实现，下面列举用native javascript方式和jquery两种不同的实现方式吧。
相关的东西

• 窗口定位fixed
  如果需要设置窗口浮动，设置窗口的定位为fixed最好啦，也就是css里面的position:'fixed'，这个position还可以设置成absolute和relative
• 获取窗口高度和宽度
  要对于窗口相对定位，当然需要知道窗口的宽和高啦，这个用window.innerWidth和window.innerHeight来获取。
• 获取DOM的实际高度和宽度
  以为定位的时候要考虑到dom元素的占位，所以要获取dom的宽和高的数值。

Native JavaScript

function googlead(){
    _dom = document.getElementById("logocont");
    if(_dom == undefined) return;
    _dom.style.position='fixed';
    _dom.style.left = (window.innerWidth-_dom.clientWidth)+'px';
    _dom.style.top = (window.innerHeight-_dom.clientHeight)+'px';
    _dom.style.display='block';
}
(function(){
    window.onscroll=googlead;
    window.resize=googlead;
    googlead();
})();

　　

jQuery方式

function googlead(){
    _dom = $("#site_nav_top");
    if(_dom == undefined) return;
    _dom.css('position','fixed');
    _dom.css({left:(window.innerWidth-_dom.width())+'px',top:(window.innerHeight-_dom.height())+'px',display:'block'});
    console.log(_dom.position());
}
(function(){
    window.onscroll=googlead;
    window.resize=googlead;
    googlead();
})();

　　

可以看出来，jQuery并没有在这里显示出什么优越性来，所以还是native比较好用:)

如果你觉得写得不错，请捐赠作者：

• 支付宝:http://me.alipay.com/imhurley

作者：

• 原文地址：http://www.factj.com/archives/134.html
• 微博：http://weibo.com/fudance
• 邮箱：strivescript#sina.com