【jQuery】用jQuery实现定位滚动导航效果

最新推荐文章于 2024-07-14 14:34:25 发布

Wendy-lxq

最新推荐文章于 2024-07-14 14:34:25 发布

阅读量5.7k

点赞数 6

分类专栏： jQuery 文章标签：定位滚动导航

本文链接：https://blog.csdn.net/u010297791/article/details/73744140

版权

本文介绍了如何使用jQuery实现滚动时二级导航固定在顶部并随滚动位置改变内容的效果。通过结合scrollTop()方法和window.location.hash，创建了一个简单的页面示例。同时补充了相关知识点，包括scrollTop()的使用、window.location.hash的管理以及animate()方法在创建动画中的应用。

摘要由CSDN通过智能技术生成

在平时写官网代码的过程中，我们经常可以碰到这样的一个情况：在顶部有一个总的导航，然后接下来会有一个banner，在banner的下面会有一个二级导航，二级导航的每个页面都有一定的内容，为了显示更友好，此时我们会在滚动的时候，让二级导航固定在顶部，然后会根据滚动的位置，将导航条的内容相应的改变，那么用jQuery如何实现这个效果呢？

我写了一个简单的页面来完成这个效果，现在先来看看效果。

接下来附上代码：

html:

<!--banner-->
<div class="pre_banner">
    <a href="##">
        <img src="images/banner.png">
    </a>
</div>

<div class="empty-placeholder hidden"></div>
<!--导航，这里一般是二级导航-->
<div id="subNav">
    <ul class="wrap">
        <li class="adv_active"><a href="#person_intro" class="adv_active adv_intro">个人简介</a></li>
        <li><a href="#honer" class="adv_honer">荣誉奖励</a></li>
        <li><a href="#academic" class="adv_academic">学术成果</a></li>