头部导航固定css,固定的页面头部导航栏

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400");

* {

-webkit-transition: 0.4s ease;

transition: 0.4s ease;

}

body {

margin: 0;

background-color: #e5e9e9;

font-size: 22px;

line-height: 28px;

letter-spacing: 4px;

font-family: "Raleway";

font-weight: 400;

}

.fixed-nav-bar {

position: fixed;

top: 0;

left: 0;

right: 0;

height: 100px;

padding: 0 25px;

box-sizing: border-box;

background-color: rgba(255, 255, 255, 0.02);

box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.4);

z-index: 100;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transition: 0.35s ease;

transition: 0.35s ease;

}

.fixed-nav-bar .logo {

position: absolute;

left: 40px;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

text-transform: uppercase;

color: #ccc;

font-size: 28px;

font-weight: 300;

}

.fixed-nav-bar .logo span {

color: #e78533;

font-weight: 600;

}

.fixed-nav-bar.scrolled {

height: 60px;

background-color: #fdfdfd;

box-shadow: 0 0 30px 3px rgba(0, 0, 0, 0.6);

}

.fixed-nav-bar.scrolled .logo {

color: #000;

}

.rela-block {

display: block;

position: relative;

overflow: hidden;

}

.cover-before::before {

content: "";

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

.deer-section {

min-height: 800px;

background: url("http://behance.vo.llnwd.net/profiles14/1216615/projects/4126225/187bebd6e0e2f26e1dc629e5949fa2c0.jpg") no-repeat center;

background-size: 424px 600px;

background-color: #1c1c1a;

box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.7);

z-index: 5;

}

.second-section {

min-height: 600px;

background: url("http://avvs.co/wp-content/uploads/2015/11/white-washed-wood-furniture-minimalist-decor-on-white-design-ideas.jpg") no-repeat center;

background-size: cover;

}

.second-section::before {

background-color: rgba(255, 255, 255, 0.88);

}

.big-floaty-image {

position: relative;

margin: 100px auto;

height: 540px;

width: 90%;

max-width: 960px;

background: url("http://www.wallpaperfoy.com/wp-content/uploads/2015/11/Phone-Wallpapers-Good-H88.jpg") fixed center;

background-size: 960px 1080px;

box-shadow: 8px 9px 25px 2px rgba(0, 0, 0, 0.5);

overflow: hidden;

}

.absolute-center-text {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 90%;

color: #fff;

text-align: center;

font-size: 44px;

font-weight: 300;

line-height: 52px;

letter-spacing: 10px;

}

.third-section {

min-height: 500px;

background: url("http://4.bp.blogspot.com/-1UHmmr4AumQ/T-QwGJwJduI/AAAAAAAAKRE/6Vgq1WmrEzM/s1600/photoshops+(81).jpg") fixed center;

background-size: cover;

}

.third-section::before {

background-color: rgba(0, 0, 0, 0.4);

}

.fourth-section {

min-height: 800px;

}

.footer {

min-height: 320px;

background-color: #222;

}

@media screen and (max-width: 800px) {

.fixed-nav-bar .logo {

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

}