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