html5滑动导航-jQuery简单实现根据滑动手动浮动导航栏的效果

bendan520 html5

2023-08-26 0 5,452 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

jQuery简单实现根据滑动手动浮动导航栏的效果

明天我会在网上看到一些别人的网站，我觉得他们很强大，比如写插件。偶然听到一个基于导航栏手动浮动的插件。当时我觉得很简单，然后我就开始尝试我就写了。

主要优点是导航栏本来就是固定的html5滑动导航，不会手动浮动在网站底部。然而，当页面下降到导航栏的位置时html5滑动导航，它开始手动浮动。当再次向下拖动到导航栏的位置时，导航栏又被固定了。新手编程，勿喷大鸟。

案例开始，整个代码如下：

导入jquery文件

<script type="text/javascript" src="http://renpengpeng.com/wp-content/themes/JieStyle-Two/js/jquery.min.js">

CSS定义

body {
width:100%;
height:9000px;
padding:0;
margin:0;
border:0;
}
.nav {
width:100%；
height:50px;
line-height:50px;
background:#000;
color:#fff;
text-align:Center;
}
.box {
height:800px;
line-height:800px;
text-align:center;
}

html调用


<div class="box">我也是一个div

<div class="nav">我是导航栏

jquery句型

$(document).ready(function(){
//首先获取导航栏距离浏览器顶部的高度
var top = $('.nav').offset().top;
//开始监控滚动栏scroll
$(document).scroll(function(){
//获取当前滚动栏scroll的高度并赋值
var scrTop = $(window).scrollTop();
//开始判断如果导航栏距离顶部的高度等于当前滚动栏的高度则开启悬浮
if(scrTop >= top){
$('.nav').css({'position':'fixed','top':'0','width':'100%'});
}else{//否则清空悬浮
$('.nav').css({'position':'','top':''});
}
})
})