jQuery将div等固定在浏览器右上角的方法

最新推荐文章于 2022-09-17 14:34:51 发布
最新推荐文章于 2022-09-17 14:34:51 发布
阅读量3.9k 收藏
点赞数
分类专栏： jQuery 文章标签： jquery 浏览器 div function 文档 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qkhhimkfrgw/article/details/7353517
版权
  
//jQuery将div等固定在浏览器右上角的方法
//$(window)：浏览器对象
//$(document.body)：body对象
//$(document):文档对象
(function($){// 拓展自jQuery
	$.extend({// 静态方法写法(自定义一个叫osiris的类，避免与jQuery自身方法重名)
		osiris : {
			setTopRight : function($this){
				$this.css({"display": "block", "position": "absolute", "text-align": "right"})
				.animate( { 
					left : $(window).width() - $this.width()
				}, 0)
				$(window).scroll(function(){
					$this.animate( { 
						top : $(document.body).scrollTop(), 
						left : $(window).width() - $this.width() + $(document.body).scrollLeft()
					}, 0);
				}).resize(function(){
					$this.animate( { 
						left : $(window).width() - $this.width() 
					}, 0);
				});
			}
		}
	});
	$.fn.extend({// 实例方法写法(这个我不会用自定义类的方法写成可以像“$(selector).osiris.setTopRight()”这样调用，会的同学欢迎提意见)
		setTopRight : function(){
			var $this =$(this);
			$this.css({"display": "block", "position": "absolute", "text-align": "right"})
			.animate( { 
				left : $(window).width() - $this.width()
			}, 0)
			$(window).scroll(function(){
				$this.animate( { 
					top : $(document.body).scrollTop(), 
					left : $(window).width() - $this.width() + $(document.body).scrollLeft()
				}, 0);
			}).resize(function(){
				$this.animate( { 
					left : $(window).width() - $this.width() 
				}, 0);
			});
		}
	});
})(jQuery);

// 调用方法
$(document).ready(function(){
	//$("#topRight").setTopRight(); 		//（1）实例方法，自身调用
	$.osiris.setTopRight($("#topRight")); 	//（2）静态方法，调用jQuery的自定义类osiris里面的静态方法
})

// 用法：控件的直接parent标签必须是body，貌似是吧……
<body>
<div id="topRight" style="width:100px; position: absolute;">topRight</>
</body>

//用animate是因为我的浏览器ie8用offset()只能取值却改不了值，暂时不知道为啥……

Osiris_Syou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery EasyUI 自定义面板右上角的功能（3）
kaleid_liner的博客
09-15 962
Jquery EasyUI 自定义面板右上角的功能
html让div显示在右上角,DIV右上角标签的CSS3实现技巧
weixin_39976951的博客
06-11 5879
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是...
html 右上角删除图标,网页制作html+css制作div标签增加右上角删除图标的示例代码...
weixin_39765697的博客
06-04 360
一、需求描述在Div标签的右上角显示删除图标二、实现方式html、CSS三、参考代码.container{width:60px;height:60px;border: 1px dotted red;position:relative;}.content{position:relative;top:20px;}.delete{width:20px;height:20px;border-radius:...
css简易制作一个div右上角的标签条
Wline
12-20 6139
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ width:200px; heig...
css简易制作一个div右上角的三角形标签条、角标
最新发布
qq_37831545的博客
09-17 2952
css简易制作一个div右上角的三角形标签条、角标
jQuery右侧悬浮固定客服代码
06-24
**jQuery右侧悬浮固定客服代码详解** 在网页设计中，提供实时在线客服支持是提升用户体验、增强用户互动的重要手段。jQuery，作为一个轻量级、高性能的JavaScript库，常常被用来实现各种交互效果，其中包括右侧悬浮...
div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动
06-19
通过正确地设置`div`的`position`、`left`、`width`、`height`等属性，以及监听滚动事件来更新`left`值，我们可以创建出一个固定在浏览器左侧且随横向滚动而移动的`div`元素。这样的设计在很多网站的侧边栏导航或...
jQuery超强div固定位置布局特效插件
12-11
**jQuery超强div固定位置布局特效插件** 在网页设计中，动态布局是提升用户体验的关键因素之一。这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果，如固定侧边栏、顶部导航或者浮动按钮...
固定在网页右下角的时钟代
08-17
以下将详细讲解如何创建一个固定在网页右下角的时钟。 首先，我们需要一个基本的HTML结构来放置时钟。HTML代码可能如下： ```html <!DOCTYPE html> 网页右下角时钟 /* CSS 代码用于设置时钟的位置和样式 *...
jquery右下角浮动窗口
04-02
本文将详细讲解如何利用jQuery实现右下角浮动窗口的效果，这种效果常用于商城网站，以实现广告展示或商品推荐。 首先，我们要明白jQuery右下角浮动窗口的核心在于创建一个定位在屏幕右下角的元素，并使其能够随滚动...
html+css制作div标签增加右上角删除图标的示例代码
11-20
一、需求描述 在Div标签的右上角显示删除图标 二、实现方式 html、CSS 三、参考代码 <style> .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:relative; top:20px; } .delete{ width:20px; height:20px; border-radius:6
DIV右上角标签的CSS3实现技巧
TwoBE9876的博客
11-10 1244
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式 我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是正常的。 其中用到了translate百分比的特性，他跟margin和padding不同，他的百分比是
jquery-alert提示插件
zuoying的专栏
03-25 607
前一段时间在忙着网站改版的工作，在表单校验提示时要求不能使用alert弹出提示，因为这样对用户体验不是很好，因此本人使用jQuery写了个jquery-alert提示插件，其实现的功能也仅仅是用来替代js原生的alert语句。现将其发布出来希望对有方面需求的朋友们有所用。 使用方法很简单： Js代码 $('#tip).alert('hello world.'); ...
获取元素距浏览器顶端的距离
当下的七炎
11-01 5348
$(function(){//获取要定位元素距离浏览器顶部的距离var navH = $(".nav").offset().top;//滚动条事件$(window).scroll(function(){//获取滚动条的滑动距离var scroH = $(this).scrollTop();//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定if(scroH>=navH){
HTML 固定div于页面固定位置，实现悬浮按钮。
热门推荐
J1ANZ
12-14 8万+
一个小需求，页面过长，业务希望将按钮悬浮于页面上，不要一下拉就盖掉操作按钮。
CSS 在div右上角显示div元素
wmnmtm的专栏
12-31 5213
&lt;style&gt;.main{ width:400px; margin-left:auto; margin-right:auto; margin-top:100px; padding:10px; border:1px solid green; position:relative; }.float_div{ position:absolute; width:10px; height:10px...
div 特价效果，右上角标记
me
07-23 1212
&lt;div style="position:relative;"&gt; &lt;b style=" position:absolute; width:80px; height:80px; right:0px; top:0px; "&gt; &lt;img src="img/new.p...
jQuery实现表头固定的方法
本文主要介绍了如何使用jQuery实现表格表头固定的几种方法，特别是通过JQuery UI插件来实现这一功能。 在网页设计中，当表格数据较多时，为了方便用户查看，通常会设置滚动条。然而，滚动条的出现会导致表头无法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值