jQuery网易新闻头部下划线跟随导航栏代码

【jQuery网易新闻头部下划线跟随导航栏代码】是一种常见的网页交互效果，它使得网站的导航栏在用户滚动页面时，当前选中的菜单项下方会有一条动态的下划线跟随，增强了用户体验，提升了网站的视觉吸引力。这个效果是通过JavaScript库jQuery实现的，结合CSS样式来完成动画效果。 jQuery是一个轻量级、高性能的JavaScript库，它的出现极大地简化了JavaScript编程。在实现这种下划线跟随导航栏的效果时，jQuery提供了方便的DOM操作、事件处理和动画功能。 我们需要在HTML中设置好导航栏的结构。通常包括一个`

`元素作为导航菜单容器，每个菜单项是一个`
• `元素，每个`
• `内包含一个链接`首页
• 新闻
• 体育

``` 接着，我们为导航栏添加基础样式，包括下划线的初始位置和大小。这里可以使用CSS来定义： ```css .nav-menu { position: relative; } .nav-menu li { display: inline-block; } .nav-menu li a { position: relative; padding-bottom: 5px; /* 下划线的高度 */ } .nav-menu li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #000; transition: width .3s ease-in-out; } ``` 然后，我们利用jQuery监听滚动事件，当用户滚动到特定菜单项时，改变下划线的宽度以模拟跟随效果： ```javascript $(document).ready(function() { var nav = $('.nav-menu'); var navHeight = nav.height(); $(window).scroll(function() { var scrollTop = $(this).scrollTop(); nav.find('li').each(function() { var curLink = $(this); var curPos = curLink.offset().top; if (scrollTop >= curPos - navHeight && scrollTop < curPos) { nav.find('a::after').width(0); curLink.find('a::after').width(curLink.width()); } else { curLink.find('a::after').width(0); } }); }); }); ``` 这段代码首先获取导航栏的高度，然后在窗口滚动时遍历每个菜单项。如果当前滚动位置在某个菜单项的上方且下方（允许一定的误差，考虑到导航栏的高度），则将该菜单项下划线的宽度设为全宽，其他菜单项的下划线则恢复为0。 别忘了在HTML文档中引入jQuery库。如果项目中还没有引入，可以通过CDN链接进行添加： ```html ``` "jQuery网易新闻头部下划线跟随导航栏代码"是通过结合HTML、CSS和jQuery实现的一种动态网页交互效果。通过这种方式，可以使得网页的导航更加直观、生动，提高了用户的浏览体验。