jQuery悬浮侧边导航栏监听代码.zip资源-CSDN文库

共3个文件

js：2个

html：1个

网页特效

jQuery特效

CSS特效

JavaScript特效

30 浏览量 2023-10-05 23:33:28 上传评论收藏 34KB ZIP 举报

在网页设计中，导航栏是页面布局的重要组成部分，它帮助用户快速访问网站的不同部分。jQuery是一种广泛使用的JavaScript库，能够简化DOM操作、事件处理和动画效果。本篇将详细讲解如何利用jQuery实现一个悬浮侧边导航栏的监听代码，同时涉及CSS特效和JavaScript特效的应用。我们需要创建HTML结构，这通常包括一个侧边栏和一些链接元素。例如： ```html <div id="sidebar"> <ul> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> </ul> </div> ``` 接下来，我们为侧边栏设置基础样式，确保其始终固定在屏幕的一侧。这里可以使用CSS来实现： ```css #sidebar { position: fixed; /* 固定定位 */ top: 0; left: 0; width: 200px; /* 导航栏宽度 */ height: 100%; /* 全屏高度 */ background-color: #333; /* 背景颜色 */ overflow-y: auto; /* 当内容超出时滚动 */ } ``` 现在，我们需要使用jQuery来监听滚动事件，并根据页面滚动位置改变导航栏的状态。例如，当用户滚动到特定区域时，可以高亮对应的链接： ```javascript $(document).ready(function() { var $sidebar = $('#sidebar'); var $sections = $('section'); // 监听滚动事件 $(window).on('scroll', function() { $sections.each(function(i) { var sectionTop = $(this).offset().top; /* 获取每个section的顶部位置 */ var sectionBottom = sectionTop + $(this).outerHeight(); /* 获取每个section的底部位置 */ if ($(window).scrollTop() >= sectionTop && $(window).scrollTop() < sectionBottom) { $sidebar.find('li').removeClass('active'); /* 移除所有active类 */ $sidebar.find('a[href="#' + $(this).attr('id') + '"]').parent().addClass('active'); /* 添加active类给当前section对应的链接 */ } }); }); }); ``` 此外，为了增强用户体验，我们还可以添加一些JavaScript特效，如平滑滚动。当用户点击导航链接时，页面会以平滑的方式滚动到相应的位置： ```javascript // 平滑滚动 $('#sidebar a').on('click', function(e) { e.preventDefault(); var target = $(this.hash); $('html, body').animate({ scrollTop: target.offset().top }, 1000); /* 动画持续时间（单位：毫秒） */ }); ``` 为了使导航栏在小屏幕上更具响应性，可以使用媒体查询进行调整： ```css @media (max-width: 768px) { #sidebar { display: none; /* 隐藏在小屏幕上 */ } #sidebar.toggled { display: block; /* 在点击按钮后显示 */ } } ``` 以上就是使用jQuery实现悬浮侧边导航栏的基本步骤。通过结合CSS和JavaScript，我们可以创建一个功能丰富、交互性强的导航栏，提高用户的浏览体验。在这个过程中，需要注意代码的组织和优化，确保性能的高效。在实际项目中，你可能还需要根据具体需求进行定制和扩展。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery悬浮侧边导航栏监听代码.zip （3个子文件）

jiaoben8704

jquery.sticky-sidebar.min.js 10KB

jquery.min.js 81KB

index.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery悬浮侧边导航栏监听代码 - 站长素材</title> <style> *{margin:0;padding:0;} ul,li{list-style:none;} .header{padding:50px 0;font-size:50px;color:#000;text-align:center;overflow:hidden;background:#ccc;} .footer{padding:100px 0;font-size:50px;color:#fff;text-align:center;overflow:hidden;background:#000;} .main{position:relative;margin:100px auto;width:1300px;overflow:hidden;} .siderBar{float:left;width:25%;} .siderBar li{margin-bottom:1px;padding:20px;line-height:50px;font-size:18px;background:#f0f0f0;cursor:pointer;transition:all .5s;} .siderBar li.cur{color:#fff;background:#000;} .content{float:right;width:70%;} .content .item{padding:300px 0;font-size:50px;color:#fff;text-align:center;overflow:hidden;} </style> </head> <body> <header class="header"> header </header> <main class="main"> <div class="siderBar"> <div class="menu"> <ul> <li data-href="#s1">栏目一</li> <li data-href="#s2">栏目二</li> <li data-href="#s3">栏目三</li> <li data-href="#s4">栏目四</li> <li data-href="#s5">栏目五</li> </ul> </div> </div> <div class="content"> <div id="s1" class="item" style="background:#999;">一</div> <div id="s2" class="item" style="background:#888;">二</div> <div id="s3" class="item" style="background:#777;">三</div> <div id="s4" class="item" style="background:#666;">四</div> <div id="s5" class="item" style="background:#555;">五</div> </div> </main> <footer class="footer"> footer </footer> <script src="js/jquery.min.js"></script> <script src="js/jquery.sticky-sidebar.min.js"></script> <script> var a = new StickySidebar('.siderBar', { topSpacing: 20, bottomSpacing: 20, containerSelector: '.content', innerWrapperSelector: '.menu' }); //点击导航栏滑动到对应板块 $('.menu li').eq(0).addClass('cur'); $('.menu li').on('click',function(){ $(this).addClass('cur').siblings().removeClass('cur'); var index = $(this).attr('data-href'); var elOffset = $(index).offset().top; $('html,body').animate({'scrollTop':elOffset}, 800); }) //创建页面滚动完成之后的回调事件 $.fn.scrollEnd = function(callback, timeout) { $(this).scroll(function(){ var $this = $(this); if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } $this.data('scrollTimeout', setTimeout(callback,timeout)); }); }; //with a 1000ms timeout $(window).scrollEnd(function(){ var ST = $(this).scrollTop(); $('.item').each(function(){ var elOffset = $(this).offset().top; if(ST >= elOffset){ var index = $(this).index(); $('.menu li').eq(index).addClass('cur').siblings().removeClass('cur'); } }) }, 0); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈