制作一个兼容IE6中的Postion:Fixed固定悬浮效果,因为IE6不兼容Postion:Fixed,就做了一个Jquey插件。
使用方法:
$('#test').PositionFixed({x:200,y:200});
插件代码:
(function($) {
jQuery.fn.PositionFixed = function(options) {
var defaults = {
css:'',
x:0,
y:0
};
var o = jQuery.extend(defaults, options);
var isIe6=false; //is ie ? yes:ie no: not ie
if($.browser.msie && parseInt($.browser.version)==6)
isIe6=true;
var html= $('html');
if (isIe6 && html.css('backgroundAttachment') !== 'fixed') {
html.css('backgroundAttachment','fixed')
};
return this.each(function() {
var domThis=$(this)[0];
var objThis=$(this);
if(isIe6)
{
var left = parseInt(o.x) - html.scrollLeft(),
top = parseInt(o.y) - html.scrollTop();
objThis.css('position' , 'absolute');
domThis.style.setExpression('left', 'eval((document.documentElement).scrollLeft + ' + o.x + ') + "px"');
domThis.style.setExpression('top', 'eval((document.documentElement).scrollTop + ' + o.y + ') + "px"');
}
else
{
objThis.css('position' , 'fixed').css('top',o.y).css('left',o.x);
}
});
};
})(jQuery)
效果图:
自己试一试
分享到:
相关推荐
例如,可以添加一个名为`fixed-nav`的类,其中包含`position: fixed`等相关的样式。 5. **图片资源**:`images`文件夹中可能包含用于装饰导航栏或与其他元素关联的图像资源。这些图像可以通过CSS背景图片属性引用,...
1. **CSS样式**:插件通过CSS来实现九宫格布局和悬浮效果,可能使用了`position: fixed`属性来实现悬浮,以及Flexbox或Grid布局来创建九宫格。 2. **JavaScript/jQuery事件处理**:插件通过监听滚动事件来保持菜单...
4. **浏览器兼容性**:虽然jQuery库本身有很好的浏览器兼容性,但在某些老版本的IE浏览器中,`position: fixed`可能表现不理想。因此,可以考虑使用polyfill或者针对这些浏览器采用其他布局策略。 5. **优化性能**...
**jQuery 返回顶部悬浮插件详解** 在网页设计中,当页面内容较长时,为了方便用户快速返回页面顶部,通常会添加一个返回顶部的悬浮按钮。本文将深入解析一个基于jQuery实现的高效、炫酷的返回顶部插件。该插件代码...
这通过CSS的`position: fixed`属性来实现,结合jQuery监听滚动事件,动态调整客服元素的位置,确保其始终可见。 2. **服务热线**:在网页中嵌入服务热线,可能是通过在客服悬浮按钮上显示电话号码,或者弹出一个...
本资源提供了一种实现“jQuery页面滚动左侧悬浮固定导航菜单”的代码方案,适用于那些希望在用户滚动页面时保持导航菜单始终可见的开发者。 jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画...
在这个例子中,`fixed-sidebar`是我们需要悬浮固定的容器,`<ul>`包含了菜单项。 接下来,我们需要设置CSS样式,确保在未滚动时菜单位于左侧适当的位置。可以使用以下样式: ```css .fixed-sidebar { position: ...
2. CSS样式:设置菜单的固定定位(position: fixed),并调整其在屏幕右侧的位置,确保在滚动时始终可见。还需考虑响应式设计,以适应不同设备和屏幕尺寸。 3. jQuery脚本:通过监听滚动事件($(window).scroll())...
在网页设计中,"div悬浮"是一种常见的效果,它使得某个div元素在用户滚动页面时始终保持在屏幕的特定位置,通常用于侧边栏导航、广告条或其他需要固定显示的元素。这个实例是基于jQuery库来实现的,jQuery是...
在线客服窗口可能通过CSS定位(如`position: fixed`)固定在屏幕右下角,利用jQuery监听用户的交互事件来控制客服窗口的显示和隐藏。窗口的内容可能包括一个聊天框、一个发送按钮以及一个接收消息的地方。可能还会...
本文将详细讲解如何利用jQuery实现一个蓝色的固定div悬浮在线客服代码,以及相关的技术要点。 首先,我们需要理解“固定div”是什么。在网页布局中,固定定位(fixed positioning)可以让元素始终位于浏览器窗口的...
"jQuery 悬浮导航栏"是一种常见的网页交互效果,当用户滚动页面时,导航栏会固定在屏幕顶部,始终保持可见,提供便捷的导航。在本篇文章中,我们将深入探讨如何使用 jQuery 实现这一功能,以及其背后的原理和技术...
**jQuery右侧悬浮百分比能量球**是一种用于网页设计的交互元素,主要利用jQuery库实现一个在页面右侧固定的、能够展示业务百分比的圆形悬浮球。这个插件设计灵感可能来源于类似360内存状态能量悬浮球,为用户提供...
3. **CSS样式**:设置初始状态下的CSS样式,通常设置`position: fixed`来实现悬浮效果,以及`top`、`right`、`bottom`或`left`来确定其在屏幕上的位置。 ```css #floatingModule { position: fixed; top: 200px; ...
2. **CSS样式**:为了实现悬浮效果,插件会设置CSS样式,包括定位(position属性,如fixed或absolute)、浮动(float属性)和z-index(决定层叠顺序),确保客服窗口始终在其他内容之上,并跟随用户滚动。...
其中,jQuery.jqfloat.js是一款专为网页图片设计的悬浮动画插件,它能为网页中的图片添加浮动特效,使页面更具吸引力。 首先,我们需要理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库,它的目标...
标题中的"jQuery右侧固定悬浮客服代码.rar"表明这是一个利用jQuery库实现的,位于网页右侧、保持固定位置的客服对话框特效。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax...
例如,设置`position: fixed`可以使元素脱离正常文档流并始终显示在视口的某个位置。另外,可能还需要调整`top`、`width`等属性来确保元素正确对齐。 2. JavaScript/jQuery:stickUp插件的核心是JavaScript代码,它...
"jQuery左侧固定悬浮二级导航菜单"是一种常见的交互设计模式,尤其适用于内容丰富的网站,以提供清晰且直观的导航结构。本知识点将深入探讨如何实现这样的功能,并通过jQuery库来创建一个高效、动态的二级导航菜单。...