首页 web前端 js教程 jquery实现的让超出显示范围外的导航自动固定屏幕最顶上_jquery

jquery实现的让超出显示范围外的导航自动固定屏幕最顶上_jquery

May 16, 2016 pm 06:01 PM
导航

其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改。当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上_jquery

复制代码 代码如下:

$().ready(function(){
//导航距离屏幕顶部距离
var _defautlTop = $("#navigator").offset().top - $(window).scrollTop();
//导航距离屏幕左侧距离
var _defautlLeft = $("#navigator").offset().left - $(window).scrollLeft();
//导航默认样式记录,还原初始样式时候需要
var _position = $("#navigator").css('position');
var _top = $("#navigator").css('top');
var _left = $("#navigator").css('left');
var _zIndex = $("#navigator").css('z-index');
//鼠标滚动事件
$(window).scroll(function(){
if($(this).scrollTop() > _defautlTop){
//IE6不认识position:fixed,单独用position:absolute模拟
if($.browser.msie && $.browser.version=="6.0"){
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999});
//防止出现抖动
$("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'});
}else{
$("#navigator").css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999});
}
}else{
$("#navigator").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex});
}
});
});

没有太多好讲的,需要注意的一点就是,IE6不认识position:fixed,需要用position:absolute去模拟,然后实时计算出top的值,另外需要给html和body加两个样式,防止滚动的时候出现抖动,具体可以了解《完美解决IE6不支持position:fixed的bug》。

  另外需要注意的一点就是,导航的宽度必须是固定值,不能是auto或者100%因为fixed和absolute都不认识,当然你也可以手动获取到导航的宽度,然后写到浮动导航样式里,不过有个前提,导航原先样式里不能有:position:relative,情况可能比较多,最简单的方法还是把导航宽度定死。

  以上代码可以复制复制到后台设置的HTML页脚代码里,如果遇到浮动导航宽度出问题了,就参考我刚才做的处理办法解决吧。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

足球导航语音包在哪个导航软件 足球导航语音包在哪个导航软件 Nov 09, 2022 pm 04:33 PM

足球导航语音包在“高德导航”软件中,是高德地图车机版导航语音包的其中一种,内容为黄健翔足球解说版本的导航语音。设置方法:1、打开高德地图软件;2、点击进入“更多工具”-“导航语音”选项;3、找到“黄健翔热血语音”,点击“下载”;4、在弹出的页面,点击“使用语音”即可。

百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能 百度地图 App 最新版本 18.8.0 发布,首次引入红绿灯雷达功能,并新增实时停车推荐功能 Aug 06, 2023 pm 06:05 PM

百度地图App安卓版/iOS版均已发布18.8.0版本,首次引入红绿灯雷达功能,业内领先据官方介绍,开启红绿灯雷达后,支持开车自动探测红绿灯,不用输入目的地,北斗高精可以实时定位,全国100万+红绿灯自动触发绿波提醒。除此之外,新功能还提供全程静音导航,使图区更简洁,关键信息一目了然,且无语音播报,使驾驶员更加专注驾驶百度地图于2020年10月上线红绿灯倒计时功能,支持实时读秒预判,导航会在接近红绿灯路口时,自动展示倒计时剩余秒数,让用户时刻掌握前方路况。截至2022年12月31日,红绿灯倒计时

导航地图上横着的8字是什么 导航地图上横着的8字是什么 Jun 27, 2023 am 11:43 AM

导航地图上横着的8字是霾,中度是黄色8预警信号,重度是橙色8预警信号。

高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准 高德地图推出升级版驾车 ETA 服务:实时解析当前路况,预估到达时间更精准 Apr 30, 2024 am 08:37 AM

本站4月29日消息,高德地图官宣推出升级版的驾车ETA(本站注:ETA即预估到达时间,指的是用户在当前时刻出发按照给定路线前往目的地预计需要的时长)服务,该服务旨在帮助用户的路线规划时长和路况预估更为精准,辅助用户进行出行决策。该地图应用是最新升级的高德地图App,引入了“超大规模图卷积神经网络模型”,该模型可以更好地捕捉和学习交通流动规律,支持城市道路网络、高速公路系统,能以高精度刻画交通状况的时空动态变化。在此外,全新版本的地图还进一步融合了iTransformer时序预测模型,支持实时解析

uniapp中如何实现页面跳转和导航 uniapp中如何实现页面跳转和导航 Oct 20, 2023 pm 02:07 PM

uniapp中如何实现页面跳转和导航uniapp是一款支持一次编码多端发布的前端框架,它基于Vue.js,开发者可以使用uniapp快速开发移动端应用。在uniapp中,实现页面跳转和导航是非常常见的需求。本文将介绍uniapp中如何实现页面跳转和导航,并提供具体的代码示例。一、页面跳转使用uniapp提供的方法进行页面跳转uniapp提供了一组方法用于实现

如何通过Vue实现图片的浏览和缩略图导航? 如何通过Vue实现图片的浏览和缩略图导航? Aug 18, 2023 pm 02:51 PM

如何通过Vue实现图片的浏览和缩略图导航?随着Web应用程序的发展,图片在我们的日常生活中扮演着越来越重要的角色。在许多情况下,我们需要实现图片的浏览和缩略图导航功能。这篇文章将介绍如何利用Vue框架实现这一功能,并提供代码示例。在Vue中,我们可以使用Vue插件来实现图片的浏览和缩略图导航功能。一个流行的插件是vue-gallery,它提供了简单易用的接口

使用PHP和XML实现网页的导航和菜单 使用PHP和XML实现网页的导航和菜单 Aug 07, 2023 am 11:34 AM

使用PHP和XML实现网页的导航和菜单导航和菜单是网页中常见的元素,它们可以使用户快速地找到所需的信息或功能。在网页开发中,PHP和XML经常被用来处理和存储导航和菜单的数据。本文将介绍如何使用PHP和XML实现网页导航和菜单,并提供相关的代码示例。一、创建XML菜单数据文件首先,我们需要创建一个XML文件来存储我们的菜单数据。以下是一个示例的XML文件,它

百度地图导航屏幕常亮怎么设置 百度地图导航屏幕常亮怎么设置 Apr 01, 2024 pm 06:22 PM

百度地图是很多小伙伴们外出都会使用的,可以提供最快捷的路线,而且还可以查看各种不同的出行方式,想要来设置导航屏幕常量的话,就来PHP中文网看小编带来的方法吧。百度地图设置导航屏幕常亮方法分享1.首先点击打开手机中的百度地图APP进入后,在页面的左上方位置点击【个人头像】打开。2.来到个人中心页面后,在其中找到【设置】功能,并在上面点击进入。3.接下来在设置页面里点击【通用设置】这一项进入。4.在通用设置页面里有一个【屏幕常亮】功能,在它的后面显示有一个开关按钮,点击圆形的滑块把按钮设置为开启状态

See all articles