HTML代码:
<div class="float" id="float"> 我是个腼腆羞涩的浮动层<img src="http://web2.qq.com/style/face/6.gif" title="含羞">,你可以轻轻地<a href="http://www.zhangxinxu.com/php/regist.php">点击我</a>(去注册页)。</div>JS代码:
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#float").smartFloat(); <style>.demo{height:1500px;}.float{width:60px; padding:10px; border:1px solid #ffecb0; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; right:10%; top:131px;}</style>
分享到:
相关推荐
标题中的“类似QQ空间上方浮动工具条(jquery)”是指一种网页设计技术,它涉及到使用JavaScript库jQuery来创建一个类似于QQ空间顶部的浮动工具栏。这种工具条通常包含一系列功能按钮或链接,如消息通知、设置选项、...
本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时,展示一个浮动菜单栏,并实现锚点定位效果。这个功能对于提高用户体验,尤其是内容丰富的长页面,是非常有用的,因为它可以帮助用户快速导航到页面的不同...
本文将深入探讨如何使用jQuery来实现“鼠标滚动条到页面底部时浮动层滑动弹出信息”的功能。 首先,我们需要理解jQuery的基本用法。jQuery是一个JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在HTML...
《jQuery实现百度百科底部浮动导航页面滚动预览详解》 在网页设计中,提升用户体验是一项重要的任务,而底部浮动导航栏则是一种常见的优化手段。它可以让用户在浏览长页面时,始终保持导航菜单可见,便于快速跳转。...
本文将深入探讨如何使用 jQuery UI 实现一个功能:当页面滚动到底部时,显示一个浮动的弹出层,用于展示图文列表。这个功能在许多网站中常见,比如加载更多内容、展示评论或广告等。 首先,我们需要理解 jQuery UI ...
"jquery浮动固定层导航条点击页面滚动到设置的描点位置"是一个常见的功能,它涉及到jQuery库的使用以及HTML锚点定位技术。下面将详细解释这个知识点。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript...
对于"jquery弹出左侧隐藏的浮动层"这个主题,我们将探讨如何使用jQuery来实现这样的功能,即在用户触发特定事件时,从页面左侧弹出一个之前隐藏的浮动层。 首先,我们需要在HTML中创建浮动层的基本结构。这个浮动层...
【jQuery右侧滚动条浮动在线客服代码点击展开收缩】 在网页设计中,为了提供更好的用户体验,很多网站都会在页面右侧设置一个浮动的在线客服系统。这种系统通常包含一个可展开和收缩的聊天窗口,用户可以随时点击与...
例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动...
本教程将详细讲解如何利用jQuery实现一个左侧浮动且跟随鼠标上下滚动的菜单代码。 首先,我们需要理解jQuery的核心概念。jQuery简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。它的语法简洁明了,使得...
标题中的“jQuery实现浮动层随浏览器滚动条滚动的方法”指的是在网页开发中,使用jQuery库来创建一个元素(通常是一个导航栏或者侧边栏),使其在用户滚动浏览器页面时始终保持在屏幕的可见区域,通常是固定在顶部。...
"Jquery任意位置浮动固定层"插件是一个轻量级的解决方案,用于使页面上的任意元素在用户滚动页面时保持在屏幕的特定位置。它适用于创建侧边栏、导航菜单或任何需要随滚动保持可视的元素。该插件的核心在于利用jQuery...
当滚动条达到预设位置(通常是页面底部)时,触发浮动层的显示动画。 浮动层的显示动画可以通过jQuery的`animate()`方法实现,它可以改变CSS属性,如高度、透明度等,以创建平滑的过渡效果。同时,为了实现关闭功能...
基于jquery+css3的固定的网页底部的炫酷工具条 基于jQuery的超强多媒体幻灯展示效果 基于jQuery的很酷的弹出层效果js插件 基于jQuery的可爱T恤折叠和展开效果的实现代码 基于jQuery的类似旋转木马的3D分享按钮效果的...
7. **CSS和JavaScript**:为了实现浮动效果,通常会结合CSS样式和JavaScript/jQuery来定位工具条,使其始终在页面的某个位置浮动。例如,可以使用position: fixed属性,并通过JavaScript监听窗口滚动事件来实时调整...
jQuery 侧面浮动对联广告是一种常见的网页交互设计技术,它利用 jQuery 库的高效功能来实现广告在页面滚动时始终保持在用户视线范围内。这种广告形式通常出现在网站的侧边栏,能够持续吸引用户的注意力,提高广告的...
jQuery Floatmenu,正如其名,旨在为网站提供一种随滚动条上下浮动的菜单,使得用户无论在页面的哪个位置都能轻松访问导航选项。这种设计提高了用户体验,特别是对于内容丰富的长页面,用户无需滚动回顶部就能找到...
在这个项目中,我们将探讨如何实现类似淘宝那样的跟踪浮动条,包括它的主要功能、实现原理以及可能涉及的技术栈。 首先,跟踪浮动条(通常称为悬浮导航或固定头部)是一种设计元素,它始终保持在页面的某个位置,...
JavaScript(简称JS)浮动toolbar是一种常见的前端开发技术,它用于创建在用户滚动页面时始终保持在视口中的工具栏。这种设计通常用于提供导航、搜索功能或者编辑工具,以提高用户体验,让用户可以方便地访问这些...
总的来说,"jQuery仿百度百科右侧浮动菜单特效"是通过jQuery对DOM操作、事件处理和页面滚动的监听,结合适当的动画效果,为用户创建了一个直观、易用的页面导航工具。这种技术在现代网页开发中非常常见,能提升用户...