身体不是100％使用:: after伪

时间：2016-02-20 20:38:25

标签： javascript jquery html css css3

我正在使用纹理背景图像，并使用body::after在其上方添加另一个图像。当我向下滚动页面时，顶部图像最终会被掩盖。

我可以使用body { overflow: auto }来修复它，但我的masthead和navbar元素不会添加minify类。 minify类使masthead更小，并将其粘贴到页面顶部。

是否有其他方法可以在不使用overflow: auto的情况下修复它？

JSFiddle

HTML 

<body>
  <div id="distance"></div>
  <div id="wrapper">
    <header id="masthead" class="masthead" role="banner">
      <h1 class="h-mast"><a href="" title="Title">Title<span class="slogan">SubTitle</span></a></h1>
    </header>
    <nav id="navbar" class="nav mainnav">
      <ol class="nav-1">
        <li class="list-nav-1 here"><a href="" title="Home">home</a></li>
        <li class="list-nav-1"><a href="nav_2/" title="Nav 2">Nav 2</a></li>
        <li class="list-nav-1"><a href="nav_3/" title="Nav 3">Nav 3</a></li>
      </ol>
    </nav>
    <main id="main" class="main" role="main" tabindex="-1">
    </main>
  </div>
</body>

CSS 

html {
  font-size: 100%;
  overflow-y: scroll
}

html,
body {
  height: 100%;
}

body {
  background: #012730 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYGWNkgAJGbcv/MDaI/n/1OCMyn3g2uknIOpHlmJAl8LGprxCfbShy8CBAdjhIBfnBg2I+Hg4AFewK0YgdlRIAAAAASUVORK5CYII=) repeat;
  font: normal 12px/1 Optima, Candara, Calibri, Arial, sans-serif;
  text-align: center;
  color: #fff;
}

body:after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url('http://i.imgur.com/2xkWw65.png') 50% 180px no-repeat fixed;
  opacity: 0.20;
  content: '';
  z-index: -1;
}

JS 

$(window).scroll(function() {
  var value = $(this).scrollTop();
  if (value > 60) {
    $('#masthead').addClass('minify');
    $('#main').addClass('minify');
  } else {
    $('#masthead').removeClass('minify');
    $('#main').removeClass('minify');
  }
  if (value > 31) {
    $('#navbar').addClass('minify');
  } else {
    $('#navbar').removeClass('minify');
  }
});

1 个答案:

答案 0 :(得分：3)

您可以使用固定定位来代替使用固定背景的绝对定位：

body::after {
  position: fixed;
}


$(window).scroll(function() {
  var value = $(this).scrollTop();
  if (value > 60) {
    $('#masthead').addClass('minify');
    $('#main').addClass('minify');
  } else {
    $('#masthead').removeClass('minify');
    $('#main').removeClass('minify');
  }
  if (value > 31) {
    $('#navbar').addClass('minify');
  } else {
    $('#navbar').removeClass('minify');
  }
});
$('.post').each(function(index) {
  var delay = $(this).attr('data-delay');
  if (typeof delay !== typeof undefined && delay !== false) {
    $(this).css('animation', 'flipInX 2s ' + delay);
    $(this).css('-webkit-animation', 'flipInX 2s ' + delay);
  }
});
* {
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  overflow-y: scroll
}
html,
body {
  height: 100%;
}
body {
  background: #012730 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAO0lEQVQYGWNkgAJGbcv/MDaI/n/1OCMyn3g2uknIOpHlmJAl8LGprxCfbShy8CBAdjhIBfnBg2I+Hg4AFewK0YgdlRIAAAAASUVORK5CYII=) repeat;
  font: normal 12px/1 Optima, Candara, Calibri, Arial, sans-serif;
  text-align: center;
  color: #fff;
}
body:after {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url('http://i.imgur.com/2xkWw65.png') 50% 180px no-repeat fixed;
  opacity: 0.20;
  content: '';
  z-index: -1;
}
*:focus {
  outline: 0;
}
a {
  color: #6fc3cc;
  text-decoration: none;
}
a:hover,
a:active {
  color: #23848f;
}
[class|=nav] {
  list-style: none;
}

/*masthead*/
.masthead {
  height: 100px;
  width: 100%;
  margin-top: 10px;
  padding: 0 1%;
  text-align: left;
  border-bottom: 2px solid #23848f;
}
.masthead .h-mast {
  vertical-align: middle;
  font-weight: lighter;
  text-transform: capitalize;
  font-variant: small-caps;
  font-size: 42px;
  letter-spacing: 4px;
}
.h-mast a {
  display: inline-block;
  height: 99px;
  padding: 10px 0 16px 100px;
  color: #fff;
}
.h-mast a:hover {
  color: #fff;
}
.slogan {
  display: block;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 2px;
  padding-left: 30px;
}
.masthead.minify,
#navbar.minify .nav-1 {
  position: fixed;
  z-index: 9999;
  -webkit-text-stroke: 0.5px;
}
.masthead.minify {
  margin: 0;
  height: 50px;
  background-color: #012730;
}
.masthead.minify .h-mast a {
  height: auto;
  background: transparent;
  font-size: 30px;
  padding: 0;
}
.masthead.minify .h-mast .slogan {
  display: none;
}
#navbar.minify .nav-1 {
  top: 14px;
}

/* Navigation Bar */
[class|=list-nav] {
  display: inline;
  margin: 0 12px;
  overflow: hidden;
}
[class|=list-nav] a,
[class|=list-nav] a:link,
[class|=list-nav] a:visited {
  color: #fff;
}
[class|=list-nav] a:hover,
[class|=list-nav] a:active,
[class|=list-nav].here a {
  text-decoration: underline
}
.mainnav .nav-1 {
  position: absolute;
  top: 44px;
  right: 1%;
  font-size: 26px;
  text-transform: capitalize;
  font-variant: small-caps;
  letter-spacing: 2px;
  z-index: 2;
}

/*main*/
.main {
  position: relative;
  display: inline-block;
  height: auto;
  width: 98%;
  margin: 40px auto 0 auto;
  text-align: left;
}
.main.minify {
  margin-top: 150px;
}
.main-1 .h-1 {
  font-size: 50px;
  line-height: 1.14em;
  letter-spacing: 2px;
  border-bottom: 2px dotted #23848f;
  text-align: center;
}
.main-2,
.main-3 {
  min-height: 400px;
  font-size: 16px;
  line-height: 24px;
}
[class|=h] {
  margin-bottom: 42px;
  font-size: 30px;
  font-weight: normal;
  line-height: 1;
}
.main-2.no_content,
.main-3.no_content {
  display: none;
}

/*animate*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.animated.bounceIn,
.animated.bounceOut,
.animated.flipOutX,
.animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s
}
@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
  }
  100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px)
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX
}

/* Home Page */
.homepage .main-1 {
  text-align: center;
}
.homepage .main-2 {
  min-height: 50px;
}
.homepage .main-3 {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.homepage .post {
  display: inline-block;
  width: 49%;
  margin-bottom: 40px;
  vertical-align: top;
  -webkit-text-stroke: 0.5px;
}
.homepage .post .h-1 {
  font-size: 26px;
  line-height: 110%;
  margin: 14px 0 10px;
  text-align: center;
}
.homepage .post .entry {
  padding: 0 10%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<body class="homepage">
  <div id="distance"></div>
  <div id="wrapper">
    <header id="masthead" class="masthead" role="banner">
      <h1 class="h-mast"><a href="" title="Title">Title<span class="slogan">SubTitle</span></a></h1>
    </header>
    <nav id="navbar" class="nav mainnav">
      <ol class="nav-1">
        <li class="list-nav-1 here"><a href="" title="Home">home</a></li>
        <li class="list-nav-1"><a href="nav_2/" title="Nav 2">Nav 2</a></li>
        <li class="list-nav-1"><a href="nav_3/" title="Nav 3">Nav 3</a></li>
      </ol>
    </nav>
    <main id="main" class="main" role="main" tabindex="-1">
      <div class="main-1">
      </div>
      <div class="main-2">
      </div>
      <div class="main-3">
        <h1 class="h-1">Services</h1>
        <article class="post flipInX animated" data-delay=".2s">
          <h1 class="h-1">Service 1</h1>
          <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
        </article>
        <article class="post flipInX animated" data-delay=".4s">
          <h1 class="h-1">Service 2</h1>
          <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
        </article>
        <article class="post flipInX animated" data-delay=".6s">
          <h1 class="h-1">Service 3</h1>
          <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
        </article>
        <article class="post flipInX animated" data-delay=".8s">
          <h1 class="h-1">Service 4</h1>
          <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
        </article>
        <article class="post flipInX animated" data-delay=".10s">
          <h1 class="h-1">Service 5</h1>
          <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
        </article>
        <article class="post flipInX animated" data-delay=".12s">
          <h1 class="h-1">Service 6</h1>
          <div class="entry">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum, lectus id sollicitudin mattis, quam tortor lobortis orci, sed iaculis mi nulla non ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
            ac turpis egestas. Donec non felis mollis, congue neque eu, rhoncus libero. Nunc ut mattis ante.</div>
        </article>
      </div>
    </main>
  </div>
</body>

相关问题
最新问题