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

Posted 2022-12-01 Wendy-lxq

     在平时写官网代码的过程中，我们经常可以碰到这样的一个情况：在顶部有一个总的导航，然后接下来会有一个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>
        <li><a href="#education" class="adv_education">教育经历</a></li>
        <li><a href="#files" class="adv_files">附件</a></li>
    </ul>
</div>

<div id="person_intro">个人简介</div>
<div id="honer">荣誉奖励</div>
<div id="academic">学术成果</div>
<div id="education">教育经历</div>
<div id="files">附件</div>

css：

body
    background-color: #f7f7f7;
    width: 100%;
    margin:0;
    padding:0;

ul,li
    list-style: none;
    padding:0;
    margin:0;

li
    float: left;

a
    text-decoration: none;

.pre_banner img
    width:100%;

.empty-placeholder
    height:120px;

.hidden
    position: fixed;
    top:0;
    left:0;
    z-index: 1000;

#subNav
    width: 100%;
    background-color: #f7f7f7;
    height:48px;
    padding:20px 0;

#subNav ul
    height:48px;
    width:1200px;
    margin:0 auto;
    background-color: #fff;

#subNav ul li
    width: 19.5%;
    border-left:1px solid #f7f7f7;
    height:48px;
    line-height: 48px;
    text-align: center;

#subNav ul li a
    color:#000;
    font-size: 16px;
    height: 48px;
    width: 100%;
    display: block;

#subNav .adv_active
    background-color: #97c740;
    color:#fff;


#person_intro,#honer,#academic,#education,#files
    height:400px;
    width:1200px;
    margin:0 auto;
    text-align: center;
    font-size: 20px;
    line-height:400px;

#person_intro
    background-color: #71ff53;

#honer
    background-color: #ffa7e8;

#academic
    background-color: #529fff;

#education
    background-color: #fbff95;

#files
    background-color: #bfa8ff;
    height:800px;
    line-height:800px;

.fixedSubNav
    position: fixed;
    top:0;
    left:0;
    z-index:1000;

js:

<script>
    $(function () 
        console.log($($('#person_intro')).offset().top - 70);
        console.log($($('#honer')).offset().top - 70);
        console.log($($('#academic')).offset().top - 70);
        console.log($($('#education')).offset().top - 70);
        console.log($($('#files')).offset().top - 70);

        var subNav_active = $(".adv_active");
        var subNav_scroll = function(target)
            subNav_active.removeClass("adv_active");
            target.parent().addClass('adv_active');
            subNav_active = target.parent();
        ;
        <!--导航点击事件-->
        $("#subNav a").click = function () 
            subNav_scroll($(this));
            var target = $(this).attr("href");
            var targetScroll = $(target).offset().top - 70;
            $("html,body").animate(scrollTop:targetScroll,300);
        ;
        //页面跳转时定位
        if(window.location.hash)
            var targetScroll = $(window.location.hash).offset().top - 70;
            $("html,body").animate(scrollTop:targetScroll,300)
        
        //页面滚动时定位
        $(window).scroll(function() 
            var targetTop = $(this).scrollTop();

            if (targetTop >= 296) 
                $("#subNav").addClass("fixedSubNav");
                $(".empty-placeholder").removeClass("hidden");
             else 
                $("#subNav").removeClass("fixedSubNav");
                $(".empty-placeholder").addClass("hidden");
            
            if (targetTop < 696) 
                subNav_scroll($(".adv_intro"));
             else if (targetTop > 706 && targetTop < 1106) 
                subNav_scroll($(".adv_honer"));
             else if (targetTop > 1106 && targetTop < 1506) 
                subNav_scroll($(".adv_academic"));
             else if (targetTop > 1506 && targetTop < 1906) 
                subNav_scroll($(".adv_education"));
             else if (targetTop > 1906) 
                subNav_scroll($(".adv_files"));
            
        );
    ());

</script>

原理说明：

       这个实现的原理其实就是利用scrollTop()方法，通过这个可以方法我们可以获取当滚动条滚动的时候隐藏起来的那个高度，然后将页面定位到当前就可以。

知识点补充：

1、window.location.hash 使用说明

     location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。 建议可以参考：window.location.hash 使用说明

2、scrollTop() 

     scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
延伸：

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 
      scrollHeight:  获取对象的滚动高度。 
      scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
      scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
      scrollWidth: 获取对象的滚动宽度 
      offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
      offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
      offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
      event.clientX ：相对文档的水平座标 
      event.clientY： 相对文档的垂直座标 
      event.offsetX ：相对容器的水平坐标 
      event.offsetY ：相对容器的垂直坐标 

3、animate() 

      animate() 方法执行 CSS 属性集的自定义动画。
      该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

      只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。