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