jQuery实现吸顶动画导航栏

最新推荐文章于 2021-06-19 14:22:24 发布

浅段蔡姬

最新推荐文章于 2021-06-19 14:22:24 发布

阅读量5.1k

点赞数

分类专栏： html小案例文章标签： html jquery css js

本文链接：https://blog.csdn.net/ganggogo999/article/details/111466310

版权

html小案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>固定导航栏</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }



    /*1--给middle盒子设置这一个属性就行--1*/
    .middle{
      /*position: sticky;*/
      /*top:0;*/
    }
		
		/*设置层级  遮住middle1*/
		.middle{
			z-index: 999;
		}

    .middle1{

      position: absolute;
      top: 129px;
      left: 0;
      display: none;
    }


    .fixed{
      position: fixed;
      top: 0;
    }

  </style>
</head>
<body>
<div class="container">
  <div class="top">
    <img src="./imgs/14_固定导航栏/1.png" alt="">
  </div>
  <div class="middle">
    <img src="./imgs/14_固定导航栏/2.png" alt="">
  </div>
  <div class="middle1">
    <img src="./imgs/14_固定导航栏/2.png" alt="">
  </div>
  <div class="bottom">
    <img src="./imgs/14_固定导航栏/3.png" alt="">
  </div>
</div>

<script src="../jquery-3.4.1.min.js"></script>
<script>
//利用js实现导航栏固定功能
  $(function () {

    //给导航栏设置点击事件看

    $('.middle,.middle1').click(function(){
      console.log('Start inputing...')
    })

    $(window).scroll(function () {

      // console.log($(window).scrollTop())

      if ( $(window).scrollTop() >= 198 ){

        //要想使用jQuery slideDown动画,在使用动画之前display只能是none
        $('.middle').slideDown(200)
        //在middle盒子滑下后给其添加fixed类，让其固定定位
        $('.middle').addClass('fixed')

        //当给.middle添加fixed，.middle就脱离了文档流，下面的内容就一下顶上去了
        $('.bottom').css('margin-top','69px')

      }
      else{//滚动值小于198px
        if ( $(window).scrollTop() < 129 ){
			$('.middle1').css('display','block')
			$('.middle').css('display','none')
			$('.bottom').css('margin-top','69px')
		}
      }
    })
  })
</script>

</body>
</html>

浅段蔡姬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现吸顶动画导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>固定导航栏</title> <style> *{ margin: 0; padding: 0; } /*1--给middle盒子设置这一个属性就行--1*/ .middle{ /*position: s
复制链接

扫一扫

专栏目录