󰅡收起

艾码汇

互联网营销设计、运营推广进阶笔记

Vultr VPS
06
十一月

JQuery 实现导航栏网页滚动下拉高度变小效果

作者: 艾慧
分类: 设计主题
共 806字
发布时间: 2016-11-06 13:56

很多网站都有顶部导航栏或是头部导航栏在网页下拉滚动过程中,高度变小的效果。实现方法,可以利用 JQuery 监控滚动条的位置变化,然后添加 CSS 样式或者删除 CSS 样式。

实现方法:

1、调用 JQuery


<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

2、HTML代码


<div class="container">
    <div class="header">
      <div class="logo">
        <h1>IM艾穗博客</h1>
      </div>
    </div>
    <div class="content">   
    </div>
</div>

3、CSS代码


* {
  margin: 0;
  padding: 0;
}
body {
  background: #FFF;
}
.container {
   display: flex;
   flex-direction: column;
}
.header {
  position: fixed;
  width: 100%;
  line-height: 80px;
  border-bottom: 1px solid #cecece;
  background: #888;
  flex: 0 0 auto;
  transition-delay: 0.5s;
  transition: all 0.2s ease-in-out;
}
.header > .logo {
  color:#f60;
  padding: 10px;
}
.header.sticky {
  line-height: 40px;
}
.content {
  height: 1000px;
}

4、JS代码


$( window ).scroll(function() {
  if($(this).scrollTop() > $('.header').height()) {
    $(".header").addClass("sticky")
  } else {
    $(".header").removeClass("sticky")
  }
});

󰁠,
Vultr VPS

版权声明:艾码汇 除原创声明皆来源于网络搜集,转载请保留原文出处

发表评论

电子邮件地址不会被公开。 必填项已用*标注