转自:http://guangqiang.iteye.com/blog/1699940
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$.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: pos, top: top});
}
});
};
return $(this).each(function() {
position($(this));
});
};
</script>
<script>
//绑定
$(document).ready(function(){
$("#nav_left_layout").smartFloat();
});
<div id="nav_left_layout">
</div>
分享到:
相关推荐
淘宝菜单的特色在于其固定位置,即使页面滚动也能保持在屏幕顶部,这需要使用`position: fixed`属性来实现。 3. **JavaScript 交互**:利用JavaScript实现菜单的动态交互。例如,当鼠标悬停在父菜单项上时,显示...
网页菜单栏浮动导航是网页设计中常见的一种技术,它使得用户在浏览页面时,无论滚动到哪里,菜单栏始终保持在屏幕的可见位置,提供便捷的导航。这种效果通常通过JavaScript来实现,因为HTML和CSS本身无法实现动态...
1. **固定顶栏**:最常见的浮动菜单是固定在顶部的菜单栏,无论用户如何滚动,它始终保持在屏幕顶部可见。这种设计适合有多个页面层级或者内容丰富的网站,确保用户始终可以快速访问主要链接。 2. **侧面滑出**:另...
本资源“简单jquery鼠标跟随左侧浮动菜单.zip”提供了一个利用jQuery实现的高效、简洁的解决方案,使得菜单能够根据鼠标的移动位置在页面左侧浮动,并保持跟随状态。这个效果在很多现代网站中常见,尤其适用于需要...
浮动菜单,也称为浮动工具栏或浮动面板,是在应用程序中可以自由移动和定位的菜单,它们通常用于提供快捷访问常用功能的方式。在MFC中实现浮动菜单,我们需要利用MFC提供的CMenu、CWnd以及CMiniFrameWnd等类。 首先...
在实际开发中,可能还需要考虑其他因素,如菜单的动画效果、鼠标悬停提示、多语言支持等。通过不断优化和调整,可以创建出更加符合用户习惯、易于使用的浮动菜单。 总之,浮动菜单是提高用户交互体验的有效设计,...
在网页设计中,浮动的菜单(Floating Menu)是一种常见的交互元素,它能够在用户滚动页面时始终保持在屏幕的特定位置,从而提供便捷的导航。这种设计技术对于提高用户体验有着显著的效果,尤其是在内容丰富的长页面...
在网页设计中,浮动菜单是一种常见的交互元素,它通常位于页面的一侧或顶部,随着用户滚动页面而始终保持可见。jQuery库提供了一种简单且高效的方式来实现这种效果。本篇文章将详细探讨如何使用jQuery来实现一个浮动...
"仿淘宝列表页条件选择工具智能浮动效果"是一种常见的网页设计技巧,它使得用户在浏览页面时可以方便地筛选和查找商品,无需滚动页面就能访问筛选选项。这个效果通过JavaScript实现,能够提供一个既直观又便捷的界面...
"仿苹果系统桌面浮动图标菜单"是一个基于Visual Basic(VB)编程语言开发的软件,其设计目标是模仿苹果操作系统(Mac OS)的桌面界面元素,特别是浮动图标菜单的功能。这个菜单在用户鼠标移动时会有所变化,为用户...
本资源提供的"Android应用源码仿360手机助手首页浮动菜单"是一个很好的学习案例,可以帮助开发者理解和实现这种功能。 首先,我们来分析一下浮动菜单的核心特性。360手机助手的首页浮动菜单通常包含几个可滑动的...
现在我们进入jQuery部分,编写监听滚动事件的代码,让菜单跟随鼠标上下移动。在jQuery中,我们可以使用`$(window).scroll()`函数来监听窗口滚动事件。然后,通过`scrollTop()`方法获取当前滚动条的位置,并相应地...
在本项目中,我们主要探讨的是如何在基于MFC(Microsoft Foundation Classes)框架的应用程序中实现菜单信息和窗体信息的浮动提示功能。MFC是一个C++类库,它为Windows应用程序开发提供了一种结构化的、面向对象的...
【仿淘宝纵向菜单】是一种常见的网页设计元素,用于构建类似淘宝网站那样层次分明、易于导航的菜单栏。这种菜单在电子商务网站中尤其常见,因为它能够有效地展示商品分类,帮助用户快速找到他们感兴趣的商品。在本...
jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏
JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...
在Android开发中,浮动菜单(Floating Menu)或浮动窗口(Floating Window)是一种常见的用户界面设计,通常用于提供快捷操作或增强用户体验。在这个“android特效集锦系列之浮动菜单(窗口)二”中,我们将深入探讨...
【jQuery仿百度百科右侧浮动菜单代码】是一种使用JavaScript库jQuery实现的网页交互功能,它旨在模仿百度百科中常见的右侧浮动菜单。这个菜单通常在页面滚动时保持固定在屏幕的一侧,提供一个方便的导航工具,用户...
本项目"天猫jQuery左侧浮动折叠菜单_(固定浮动、智能定位、CSS3折叠)"就是这样一个例子,它展示了如何利用jQuery与CSS3技术来创建一个类似于天猫网站的高效、动态的菜单导航。 首先,我们来看"左侧浮动折叠菜单...
这篇教程将深入探讨如何在Android平台上创建一个仿360手机助手首页的浮动菜单。首先,我们需要理解Android应用的基本架构,这包括Activity、Intent、布局(Layout)以及自定义View等核心概念。 **1. Activity与...