JavaScript设置右下角悬浮窗

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

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

Native JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

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

1 2 3 4 5 6 7 8 9 10 11 12

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比较好用:)