jQuery+CSS3固定顶部菜单特效

PetitQ 导航菜单 2019-1-27 1.44K 0 1

这是一款使用 CSS3 和少量 jQuery 代码制作的网页固定顶部菜单特效。该固定菜单特效在页面向下滚动的时候，页面顶部的 banner 区域会缩小直到消失，导航菜单则会跟着页面向下移动。配合 CSS3 过渡动画，效果非常时尚炫酷。

HTML 结构

该固定顶部菜单的 HTML 结构分为两个主要部分：一个是顶部菜单和 banner，它们用<header>元素包裹。另一个是页面的内容区域 div.wrapper。

也想出现在这里？联系我们吧

```
<header>
```
```
  <h1>Sticky Header Pow!</h1>
```
```
  <nav>
```
```
    <a href="">Home</a>
```
```
    <a href="">About</a>
```
```
    <a href="">Gallery</a>
```
```
    <a href="">Contact</a>
```
```
  </nav>
```
```
</header>
```
```
<div class="wrapper">
```
```
  <section id='steezy'>
```
```
    <h2>......</h2>
```
```
    <p>......</p>
```
```
  </section>
```
```
  ......
```
```
</div>
```

CSS 样式

header 元素以固定方式定位，100%的宽度，300 像素的高度，并设置 ease 效果的 CSS3 过渡动画。

```
header {
```
```
  width: 100%;
```
```
  height: 300px;
```
```
  background-color: #3498db;
```
```
  text-align: center;
```
```
  position: relative;
```
```
  position: fixed;
```
```
  top: 0;
```
```
  overflow: hidden;
```
```
  -moz-transition: all 0.5s ease;
```
```
  -o-transition: all 0.5s ease;
```
```
  -webkit-transition: all 0.5s ease;
```
```
  transition: all 0.5s ease;
```
```
}
```

头部的 h1 元素在页面滚动时会跟着放大缩小，开始时为它设置 ease 效果的 CSS3 过渡动画。

```
header h1 {
```
```
  font-size: 42px;
```
```
  color: #fff;
```
```
  line-height: 230px;
```
```
  text-transform: uppercase;
```
```
  font-weight: 100;
```
```
  -moz-transition: all 0.3s ease;
```
```
  -o-transition: all 0.3s ease;
```
```
  -webkit-transition: all 0.3s ease;
```
```
  transition: all 0.3s ease;
```
```
}
```

水平导航菜单的基本样式如下：

```
header nav {
```
```
  position: absolute;
```
```
  bottom: 0;
```
```
  height: 60px;
```
```
  line-height: 60px;
```
```
  width: 100%;
```
```
  background-color: rgba(0, 0, 0, 0.1);
```
```
}
```
```
header nav a {
```
```
  color: #fff;
```
```
  display: inline-block;
```
```
  padding: 10px 15px;
```
```
  line-height: 1;
```
```
  text-decoration: none;
```
```
  -moz-border-radius: 2px;
```
```
  -webkit-border-radius: 2px;
```
```
  border-radius: 2px;
```
```
}
```
```
header nav a:hover {
```
```
  -moz-box-shadow: 0 0 0 1px #fff;
```
```
  -webkit-box-shadow: 0 0 0 1px #fff;
```
```
  box-shadow: 0 0 0 1px #fff;
```
```
}
```

当页面开始滚动的时候，body 元素被添加.sticky-header class，这时 header 的高度被设置为 60 像素，刚好等于水平导航菜单的高度。h1 元素则使用 transform: scale(0, 0)缩放到最小。

```
body.sticky-header {
```
```
  padding-top: 100px;
```
```
}
```
```
body.sticky-header header {
```
```
  height: 60px;
```

  background-color: rgba(52, 152, 219, 0.9);

```
}
```
```
body.sticky-header header h1 {
```
```
  -moz-transform: scale(0, 0);
```
```
  -ms-transform: scale(0, 0);
```
```
  -webkit-transform: scale(0, 0);
```
```
  transform: scale(0, 0);
```
```
}
```

JavaScript

该固定顶部菜单使用 jQuery 代码来监听页面滚动事件，并在适当的时候为 body 元素添加和移除.sticky-header class。

```
$(function () {
```
```
    $(window).scroll(function () {
```

        var winTop = $(window).scrollTop();

```
        if (winTop >= 30) {
```

            $('body').addClass('sticky-header');

```
        } else {
```

            $('body').removeClass('sticky-header');

```
        }
```
```
    });
```
```
});
```

jQuery+CSS3 固定顶部菜单特效

已有 360 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

导航菜单

jQuery+CSS3固定顶部菜单特效

HTML 结构

CSS 样式

JavaScript

jQuery+CSS3 固定顶部菜单特效

相关文章

CSS3 带小图标垂直下拉菜单

商城分类导航菜单+广告焦点图轮播代码

高性能jQuery固定侧边栏插件

发表回复取消回复

热销模板

导航菜单

HTML 结构

CSS 样式

JavaScript

jQuery+CSS3 固定顶部菜单特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复