javascript - body 不是 100% using::after pseudo

标签 javascript jquery html css

我正在使用一个纹理背景图像，在该图像之上使用 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');
  }
});

最佳答案

您可以使用固定定位，而不是固定背景的绝对定位:

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>

关于javascript - body 不是 100% using::after pseudo，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35528725/

上一篇：javascript - angular $http $watch 文件上传过程中的进度

下一篇：javascript - ng-repeat radio 过滤器不工作

相关文章：

javascript - 鼠标从触发器移开后保持 Div 可见(jQuery)

javascript - 如何使用 Angular 2 添加背景图片伪元素 'after' 内容？

jquery - 使标签位置在滚动时固定

c# - 使用主页时在网页上设置背景图片

javascript - GridX 中的 HTML 转义

javascript - 通过 MediaWiki API 从文章返回文本？

javascript - jQuery 转换是否可能无法在繁重的网页上工作？

javascript - 向下滚动页面，然后使用 jQuery 向上滚动

javascript - 仅在将鼠标移至输入上方后才渲染文本文本标签

python - 如何从 url 中的模板传递 pk 以在 View "Django"中使用？

©2024 IT工具网  联系我们