很多时候,我们需要设置一个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比较好用:)

如果你觉得写得不错,请捐赠作者:

作者:

JavaScript设置右下角悬浮窗的更多相关文章

  1. JS缓冲运动案例:右下角悬浮窗

    JS缓冲运动案例:右下角悬浮窗 红色区块模拟页面的右下角浮窗,在页面进行滚动时,浮窗做缓冲运动,最终在页面右下角停留. <!DOCTYPE html> <html lang=&quo ...

  2. JavaScript之右下角广告

    网站中,我们都遇到想这样的悬浮广告,我们先给图片设置右下角悬浮属性,关闭按钮键也就是节点的删除: window.onload = function(){ var TipBox = document.g ...

  3. Android 悬浮窗、悬浮球开发

    原文:Android 悬浮窗.悬浮球开发 1.权限管理 直接看我另外一篇博客吧,传送门: https://my.oschina.net/u/1462828/blog/1933162 2.Base类Ba ...

  4. 兼容MIUI5和MIUI6的开启悬浮窗设置界面

    前一段时间项目中需要对MIUI的悬浮窗开启设置界面进行了引导和跳转,MIUI6中又改变了开启悬浮窗设置的位置,在苦苦寻觅之后,找到了解决的方法,贴出来以方便大家参考和使用. @Override pub ...

  5. iOS电商常见动画与布局、微信悬浮窗、音乐播放器、歌词解析、拖动视图等源码

    iOS精选源码 MXScroll 介绍 混合使用UIScrollView ios 电商demo(实现各种常见动画效果和页面布局) 一行代码集成微信悬浮窗 可拖动,大小的视图,可放置在屏幕边缘. 在使用 ...

  6. Qt QPropertyAnimation+QTimer实现自制悬浮窗

    目录 Qt下的悬浮窗 QPropertyAnimation QTimer 事件过滤 图标变换 自适应窗口大小 使用方法 Qt下的悬浮窗 最近项目需要一个类似于360悬浮球类似的悬浮窗,当鼠标放入停留一 ...

  7. JS网站右下角悬浮视窗可关闭广告

    效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chro ...

  8. WindowManager 实现悬浮窗 详解

    WindowManager 实现悬浮窗 详解 一:对于想直接看效果的,可以看看我的demo app. 链接:http://sj.qq.com/myapp/detail.htm?apkName=com. ...

  9. Android悬浮窗实现 使用WindowManager

    Android悬浮窗实现 使用WindowManager WindowManager介绍 通过Context.getSystemService(Context.WINDOW_SERVICE)可以获得  ...

随机推荐

  1. 同时连接多台Android设备进行Monkey Test

    事情多了就会乱,时间久了就会忘. adb -s remount id(devices ID) adb -s shell id monkey -p package name -v count

  2. Ubuntu下安装PAC Manager

    在Windows下习惯使用XShell.PAC Manager其实就是一个在Linux系统类似XShell的工具. 下载地址: https://sourceforge.net/projects/pac ...

  3. java开发功能代码汇总

    多文件上传 http://smotive.iteye.com/blog/1903606 java 常用代码 Struts2 前后台(Action ,jsp)传值.取值 Action public Li ...

  4. poj 1265 Area(Pick定理)

    Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5666   Accepted: 2533 Description ...

  5. JavaScript高级程序设计51.pdf

    (续上篇) 模拟鼠标事件 var btn=document.getElementById("myBtn"); //创建事件对象 var event=document.createE ...

  6. 7月19日Docker&Kubernetes技术沙龙总结 - DockOne.io

    7月19日Docker&Kubernetes技术沙龙总结 - DockOne.io undefined

  7. 如何在 Linux 终端下创建新的文件系统/分区

    在 Linux 中创建分区或新的文件系统通常意味着一件事:安装 Gnome Parted 分区编辑器(GParted).对于大多数 Linux 用户而言,这是唯一的办法.不过,你是否考虑过在终端创建这 ...

  8. php判断字符串是不是xml格式并解析

    最近遇到要要判断一个字符串是不是xml格式,网上找到一段代码,试了一下,完全可行 /**      * 解析XML格式的字符串      *      * @param string $str     ...

  9. 【转】谁说Vim不是IDE?(二)

    谁说Vim不是IDE?(二)   环境配置 “如果你认为Vim只是一个文本编辑器,你就输了”——来自Vim老鸟 Vim以简洁的方式提供了丰富的配置功能,主要配置体系由一个文件和文件夹组成.在一台安装了 ...

  10. UVA 6199 不定根最小树形图

    首先是最小树形图的介绍. 看这个博客.最小树形图 上面介绍的很详细了,我就讲一下这道题的题意. 首先给出一些二维点坐标,这些坐标之间构成一些有向图,根据题意,假设两个点a(x1 ,y1) ,b(x2 ...