`

jQuery插件实现DIV浮动在页面固定位置中

 
阅读更多

今天看到一个很好的jquery插件:(详细demo请去附件下载)

 

我们浏览网站的时候,经常能看到固定在页面中且不会随着滚动条滚动的DIV层,这样的浮动效果可通过Portamento这个jQuery插件实现。

jQuery插件实现DIV浮动在页面固定位置中

  Portamento是一个轻量级的jQuery插件,它具有简单并且容易使用的特点。使用此插件,只需一行代码便可实现网页元素浮动于固定位置的效果。它会检测浏览器大小是否足以显示浮动层,如果过小将不会浮动显示。Portamento也提供了几个参数可供设置,定制性也是比较高的。

如何使用

  此插件的使用方法其实很简单,首先要引入jQuery库和portamento插件,如下

<script src="jquery-1.4.2.min.js"></script>
<script src="portamento-min.js"></script>

  对需要设置浮动的元素添加必要的CSS样式,代码如下(sidebar即为浮动的元素)

#portamento_container {float:right; position:relative;}
#portamento_container #sidebar {float:none; position:absolute;}
#portamento_container #sidebar.fixed {position:fixed;}

  最后初始化即可,完整代码可查看文后的演示

$('#sidebar').portamento();

分享到:
评论

相关推荐

    jquery.floatdiv 浮动层固定位置

    jquery.floatdiv 浮动层固定位置 /*说明:可以让指定的层浮动到网页上的任何位置,当滚动条滚动时它会保持在当前位置不变,不会产生闪动*/ /*调用: 1 无参数调用:默认浮动在右下角 $("#id").floatdiv(); 2 内置...

    jQuery超强div固定位置布局特效插件

    这款基于jQuery的插件允许开发者实现div元素在页面滚动时保持在特定位置的效果,如固定侧边栏、顶部导航或者浮动按钮。这种布局方式能够确保关键信息始终可见,提高用户交互性。 首先,我们要理解jQuery库。jQuery...

    Jquery插件之浮动窗口(DIV)

    在网页设计中,浮动窗口(通常是一个具有特定功能的`div`元素)是一种常见的交互元素,它能够悬浮在页面内容之上,提供信息提示、广告展示或者用户交互等功能。jQuery作为一种强大的JavaScript库,为创建这样的浮动...

    jquery 可拖动浮动DIV ,可固定DIV

    本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先,让我们理解“浮动DIV”。在HTML中,浮动(float)属性常用于布局,使元素可以向左或向右移动,以便其他内容可以环绕它。在CSS...

    jQuery ui drag插件实现浮动div拖动排列布局代码

    本篇文章将深入讲解如何使用jQuery UI Drag插件来创建可拖动的浮动div,并将其应用于布局排列,以及如何将排序结果保存到数据库。 **1. jQuery UI Drag插件介绍** jQuery UI是基于jQuery库的一个扩展,它提供了...

    Jquery任意位置浮动固定层【插件】

    "Jquery任意位置浮动固定层"插件是一个轻量级的解决方案,用于使页面上的任意元素在用户滚动页面时保持在屏幕的特定位置。它适用于创建侧边栏、导航菜单或任何需要随滚动保持可视的元素。该插件的核心在于利用jQuery...

    jquery 浮动层插件

    除了基础功能外,开发者还可以结合其他jQuery插件或自定义JavaScript代码,实现更复杂的功能,例如: - **表单验证**:在浮动层内嵌入表单,并使用验证插件检查用户输入。 - **异步加载**:动态加载浮动层内容,如...

    jQuery实现div浮动层跟随页面滚动效果

    总的来说,实现div浮动层跟随页面滚动效果的关键在于理解CSS布局、jQuery事件处理以及自定义JavaScript插件的使用。通过结合这些技术,我们可以创建出用户体验优秀的交互效果,使页面元素始终保持在用户视野范围内,...

    jquery 插件 任意位置浮动固定层

    该jquery插件“任意位置浮动固定层”能够有效地帮助开发者实现网页元素的自定义位置浮动功能,提升用户体验。它简单易用,通过灵活的调用方式,可覆盖多种使用场景,是前端开发中提升界面友好性的得力工具。

    Jquery弹出DIV

    模态对话框通常是网页中的一个浮动元素,可以覆盖页面的其他部分,直到用户与其交互后才会关闭。 **1. jQuery基础知识** 在深入理解jQuery弹出DIV之前,我们需要了解一些基本的jQuery概念: - 选择器:jQuery的选择...

    jquery浮动广告滚动位置固定插件

    基于jquery的滚动固定位置广告位插件,支持自定义偏移量。 用法: window.onscroll=function(){floatWin("branding","right","top")} window.onscroll=function(){floatWin("branding","left","top")} window....

    jQuery插件集之(div弹出1)+Demo

    **jQuery插件集之(div弹出1)...通过学习和实践这个jQuery插件,你可以轻松地在项目中添加div弹出功能,同时提高页面的交互性和用户友好性。不断探索和理解这些插件的内部机制,将有助于你成为一名更出色的前端开发者。

    实现元素漂浮在水面特效的jQuery插件

    在"waterfloat"插件中,这种效果可能通过CSS3变换、过渡和JavaScript计算来模拟,使得元素在页面上呈现出上下浮动、摇摆的动态,给人一种物体在水面浮动的真实感。 【jQuery插件开发】jQuery插件开发遵循一定的结构...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要&lt;div id="ok"&gt;这里是弹出浮动遮罩层&lt;/...

    Jquery图片放大查看插件

    在"magnify-master"这个压缩包中,包含了一个名为"Magnify"的jQuery插件。它的核心功能包括: 1. **动态创建放大镜元素**:插件会在原始图片上动态生成一个放大镜元素,通过CSS样式控制其位置和外观。 2. **计算...

    jQuery做浮动层/浮动广告/漂浮

    标题中的“jQuery做浮动层/浮动广告/漂浮”指的是使用jQuery这个JavaScript库来实现页面上的元素(通常为广告)保持在用户滚动页面时始终可见的效果。这种技术常见于网页设计中,用来吸引用户的注意力或者提供重要的...

    jquery浮动层,跳转到页面指定链接

    通过CSS样式可以实现元素的定位,使其始终固定在屏幕的某个位置。 接着,jQuery的使用。要创建一个浮动层,我们需要引入jQuery库。这可以通过在HTML文件中添加CDN链接或者将jQuery库的js文件下载并放置在项目中来...

Global site tag (gtag.js) - Google Analytics