Jquery实现滚动条滚到一定高度时，导航栏固定

最新推荐文章于 2022-05-11 16:51:32 发布
最新推荐文章于 2022-05-11 16:51:32 发布
阅读量3.8k 收藏 3
点赞数
文章标签： Jquery Jquery导航栏 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014599700/article/details/78031421
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Jquery实现滚动条滚到一定高度时，导航栏固定</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>

<script>
$(function(){
var nav=$(".nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。

win.scroll(function(){
 if(sc.scrollTop()>=60){
   nav.addClass("fixnav"); 
  $(".navlist").fadeIn(); 
 }else{
  nav.removeClass("fixnav");
  $(".navlist").fadeOut();
 }
})  

//鼠标经过li对象时，查找li下的ul.
$("ul li").hover(function(){
$(this).find("ul").show();
},function(){
$(this).find("ul").hide();
})
})
</script>
</head>


<body>


<style>
body,p,div,ul,li{
margin:0px;padding:0px;}
p{
text-align:center;}
.nav{
border:1px solid #eee;position:relative;height:30px;}
.nav ul{
list-style-type:none;height:30px;background:#eee;}
.nav ul li{
float:left;width:100px;text-align:center;height:30px;line-height:30px;}
.nav ul li a:link{
color:#000;text-decoration:none;}
.nav ul li a{
display:block;}
.nav ul li a:hover{
background:#f60;}
.show{
background:#f60;color:#fff;}
.fixnav{
position:fixed;top:0px;left:0px;width:100%;}
.nav ul li>ul li{
background:#eee;}
</style>

<p>测试数据测试数据1</p>
<p>测试数据测试数据2</p>
<p>测试数据测试数据3</p>
<div class="navlist" style="display:none;height:0;"></div>

<div class="nav">
 <ul>
   <li class="show"><a href="#" style="color:#fff;">首页</a></li>
   <li>
    <a href="#">测试1</a>
<ul style="display:none;">
<li><a href="#">测试测试1</a></li>
   <li><a href="#">测试测试2</a></li>
   <li><a href="#">测试测试3</a></li>
   </ul>
</li>
   <li><a href="#">测试2</a></li>
   <li><a href="#">测试3</a></li>
 </ul>
</div>

<div>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
<p>测试数据测试数据222</p>
</div>
</body>


</html>
不问归期
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
Love.Hope.Faith
12-20 1万+
如题。         《1》         我们经常会实现一种效果，这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部，有时候在侧边。实现的方法非常简单，只需要通过CSS进行元素的控制。         要点有：position:fixed;通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。         基本上对这两个
jQuery实现导航栏头滚动条卷动导航栏固定
Transfer_Jane的博客
06-08 405
&lt;！DOCTYPE html&gt; &lt;html lang =“en”&gt; &lt;head&gt; &lt;meta charset =“UTF-8”&gt; &lt;title&gt;头部导航栏部分固定&lt;/ title&gt; &lt;link rel =“stylesheet”href =“css /base.css“type =”text / css“&gt;
页面滚动一定距离后导航条固定
weixin_45685108的博客
10-23 493
场景 如淘宝页面，滚动条滚动一定距离后页眉会有一个固定的搜索框、右侧也会将导航条固定，并且产生一个新的板块。如下图所示： 这种样式是需要在script中做点样式，代码如下： <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> //我也不知道是啥，但是不加不行 <script> // 右侧导航滚动固定 $(function() {
滑动滚动吸顶式导航栏
10-10
随着鼠标滚动，导航栏逐渐被遮住，当继续滚动鼠标时，导航栏出现并一直吸顶。再次鼠标上划时，导航栏又恢复原样。
jquery实现滚动条滚动到一定高度导航固定不变
weixin_30588827的博客
03-07 202
<div class="one"></div> .one { width: 800px; height: 100px; background-color: yellow;} .fix { position: fixed; left: 0; top: 0; background-color: pink;} $(function(){ var ...
jQuery实现带滚动线条导航效果的方法
10-24
在导航栏离开鼠标时，我们使用`.mouseleave()`事件处理程序，让线条返回到之前记录的位置`m`。这里同样使用了`stop(true, true)`和`animate()`。 值得注意的是，示例代码中使用了`easing`插件来实现更丰富的动画...
jQuery实现背景弹性滚动的导航效果
10-22
在网页设计中，导航栏是页面布局的重要组成部分，它引导用户轻松访问网站的不同部分。而弹性滚动导航效果则为用户提供了一种动态且吸引人的交互体验。本文将详细讲解如何使用jQuery来实现背景弹性滚动的导航效果，...
jQuery固定导航随页面滚动颜色渐变
10-29
"jQuery固定导航随页面滚动颜色渐变"这个主题涉及到的技术点主要是利用jQuery库来实现导航栏随着页面滚动而动态改变颜色的效果，为用户带来更丰富的视觉体验。 首先，我们需要了解jQuery库。jQuery是一个快速、简洁...
jQuery全屏页面滚动导航切换效果
06-05
- 固定顶部导航：使用`position: fixed`让导航栏始终显示在屏幕顶部。 - 页面过渡效果：可以设置CSS3的过渡属性，如`transition: all 0.5s ease`，来实现平滑过渡。 3. **jQuery代码实现** - 绑定滚动事件：`$...
jquery浮动固定层导航条点击页面滚动到设置的描点位置
10-31
浮动固定层导航条通常是指当用户滚动页面时，导航条会始终停留在屏幕的某一位置，不论用户滚动到页面的哪个部分，都能快速访问导航条。这可以通过CSS的`position: fixed`属性实现，结合`top`或`bottom`属性来设定...
导航滚动一定高度吸顶，锚点定位
12-05
网络上发现的案例。觉得不错就复制下来了。以便于自己改造！
滚动到一定高度后，固定显示
02-13
前端开发中，经常用到滚动到一定高度后，固定显示需求
jquery实现当滑动到一定位置时固定效果
心若向阳 无谓悲伤
05-16 2202
例子说明：当滑动页面致使滚动条距离顶部大于等于整个页面的百分之二十的时候固定菜单栏，且菜单栏距离整个页面的顶部为大标题的高度 1.绘制页面 <body style="margin: 0px;font-size: 36px;"> <div id="mtitle" style="text-align: center;background-color: #B84911"&...
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
js滚动到指定页面高度
唯-心的专栏
05-13 1万+
js-页面打开后滚动到特定位置的效果 　　滚动页面的方法有scroll、scrollBy和scrollTo，三个方法都带两个参数：x(X轴上的偏移量)和y(Y轴上的偏移量)。因为是要滚动到页面底部，所以参数x为0，y为页面的滚动高度。另外，页面的滚动高度必须在网页加载完成后才能获取到，所以触发事件用onload。  　　具体步骤：  　　方法一：用scroll方法实现。  　　
jquery屏幕滚动到一定高度显示某个元素
猿学
11-25 1373
jquery屏幕滚动到一定高度显示某个元素 $(function(){ $(window).on('scroll',function(){ var w=$(document).scrollTop();//获取滚动条到顶部的垂直高度 if(w>=500){ $("#floor-nav").show(); }else{ $("#floor-nav").hide(); } }); }) ...
jQueryMobile工具栏详解：Headers与Footers
导航条部件是jQueryMobile的一个特色，它使得创建水平导航栏变得简单，只需将无序列表（ul）与相应的链接进行标记，框架会自动将其转换为水平布局的按钮栏，增强了页面的导航功能和视觉效果。 工具栏的定位可通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值