`

div浮于页面固定位置、展开与隐藏、锚点定位

阅读更多
具体代码请参考附件demo。
浮动效果是通过jQuery插件Portamento实现的:
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();

展开与隐藏实现起来很简单,只有一个方法:
<script type="text/javascript">
			$(document).ready(function(){
				$(".content1").hide();
				$(".c-title1").click(function(){
					$(this).next(".content1").slideToggle(500);		//展开和关闭需要的时间(毫秒)
				});
			});
		</script>

slideToggle(500)方法负责处理展开与隐藏。

快速锚点定位,同样很简单,通过scrollIntoView()方法就实现了。
1
0
分享到:
评论

相关推荐

    jQuery页面滚动显示浮动菜单栏锚点定位效果

    本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时,展示一个浮动菜单栏,并实现锚点定位效果。这个功能对于提高用户体验,尤其是内容丰富的长页面,是非常有用的,因为它可以帮助用户快速导航到页面的不同...

    JS如何实现在页面上快速定位(锚点跳转问题)

    当在浏览器地址栏输入一个带有锚点的URL时,浏览器会尝试跳转到页面中id属性与URL中的锚点相对应的元素位置。如果找不到匹配的id,页面通常不会跳转,但URL地址会变化。如果是在当前页面中,除了URL地址变化外,页面...

    jQuery侧边栏固定层锚点定位代码.rar

    jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点定位代码.rar jQuery侧边栏固定层锚点...

    锚点快速定位到页面中指定位置

    在网页设计中,锚点(Anchor)是一种非常实用的功能,它允许用户通过点击链接快速跳转到页面内的特定位置。本文将深入探讨锚点的工作原理、如何创建锚点以及其在实际网页开发中的应用。 首先,锚点是HTML中标签的一...

    jQuery侧边栏固定层锚点定位代码.zip

    侧边栏固定层锚点定位的核心原理是监听页面的滚动事件,当页面滚动到特定位置时,将侧边栏菜单固定在屏幕的一侧,这样用户在浏览页面下部时仍然可以方便地看到和访问菜单。这个项目中包含了“劲爆商品”、“最新特卖...

    onclick锚点定位

    为了实现页面右侧的浮动锚点,我们可以创建一个固定定位的导航栏,包含各个锚点的链接。利用CSS的`position: fixed`和`right: 0`属性,可以让这个导航栏始终显示在屏幕右侧。例如: ```css .anchor-nav { position...

    锚点定位.rar

    在网页设计中,锚点定位(Anchor Link)是一种常见的技术,用于实现在同一HTML文档内快速跳转到不同部分的功能。这种技术对于长页面的导航非常有用,例如,当用户点击菜单时,页面会平滑滚动到相应的内容区域。本...

    前端-搜索高亮、字体放大及锚点定位功能

    锚点定位则需防止页面滚动过快时定位不准确,可以设置一个缓冲区,当滚动距离接近锚点时提前触发定位效果。 在nuxt.js项目中,以上功能的实现通常会涉及Vue.js组件的设计、生命周期钩子的使用、CSS样式编写以及与...

    js锚点定位

    5. **与SPA(单页应用)的整合**:在单页应用中,锚点定位通常与路由系统结合使用,以便在导航时更新URL并实现页面局部刷新。 总之,JavaScript锚点定位是一个实用且强大的技术,能够提升网页的交互性和用户体验。...

    jQuery侧边导航锚点定位代码.zip

    本资源"jQuery侧边导航锚点定位代码.zip"聚焦于利用jQuery实现一种特定的交互效果——侧边导航与页面锚点定位。这种技术在现代网页设计中非常常见,尤其是用于内容丰富的长页面,可以提供良好的用户体验,帮助用户...

    jquery a标签锚点定位特效.zip

    当用户点击一个带有锚点链接的a标签时,而不是立即跳转到目标位置,特效会通过修改页面滚动位置来创建一个平滑的滚动效果。这种效果可以是渐进式的,让页面内容慢慢滑入视口,增加用户的沉浸感。 实现这个特效的...

    导航滚动到一定高底后吸顶,锚点定位自动跟随

    导航滚动到一定高底后吸顶,锚点定位自动跟随 //内容信息导航吸顶 $(document).ready(function(){ var navHeight= $("#navHeight").offset().top; var navFix=$("#nav-wrap"); $(window).scroll(function(){...

    页面内锚点定位及跳转方法总结(推荐)

    页面内锚点定位和跳转是网页设计中常见的交互元素,它允许用户通过点击链接快速定位到页面内的特定位置。本文将对几种不同的锚点定位和跳转方法进行详细总结,帮助开发者更好地理解和应用这些技术。 首先,最基础的...

    jQuery锚点定位全屏滚动切换代码

    它的工作原理是监听滚动事件,当页面滚动到特定的DOM元素(通常与页面上的锚点关联)时,会触发平滑滚动动画,将页面定位到相应的部分。 在项目中,`index.html`是主页面文件,包含了HTML结构。这里,每个全屏内容...

    锚点与定位.rp

    锚点与定位.rp

    【JavaScript源代码】vue实现锚点定位功能.docx

    在 Vue 中实现锚点定位功能,可以增强用户体验,使得用户可以通过点击导航栏中的链接直接跳转到页面的特定位置。以下是使用 Vue.js 实现锚点定位的详细步骤和相关知识点: 1. **锚点的基本概念**: 锚点(Anchor)...

    详解Vue项目中实现锚点定位

    在Vue项目中实现锚点定位,主要涉及Vue框架中处理路由跳转和页面滚动的技术。传统的HTML中的锚点定位方法,在Vue项目中可能无法正常工作,因为Vue框架对页面DOM的管理与原生HTML有所不同。具体来说,在Vue项目中,若...

Global site tag (gtag.js) - Google Analytics