溢出不允许js用滚动条隐藏元素

时间：2018-11-22 13:49:27

标签： javascript html css

所以我有标题标签，当向下滚动时它将隐藏它。但是因为我想使用具有溢出的视差层，所以我无法这样做，因此标头只会卡在屏幕上，并与其他元素朝同一方向移动。

如果在CSS中禁用“溢出”，您将看到效果正在起作用，但是通过禁用“溢出”，我将失去视差效果。

var $content = $('.box');

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function Scroller() {
  this.latestKnownScrollY = 0;
  this.ticking = false;
};

Scroller.prototype = {
  init: function() {
    window.addEventListener('scroll', this.onScroll.bind(this), false);
  },

  onScroll: function() {
    this.latestKnownScrollY = window.scrollY;
    this.requestTick();
  },

  requestTick: function() {
    if (!this.ticking) {
      window.requestAnimFrame(this.update.bind(this));
    }
    this.ticking = true;
  },

  update: function() {
    var currentScrollY = this.latestKnownScrollY;
    this.ticking = false;

    var slowScroll = currentScrollY / 2
    var opaScroll = 1.4 - currentScrollY / 200
    $content.css({
      'transform': 'translateY(' + slowScroll + 'px)',
      '-moz-transform': 'translateY(' + slowScroll + 'px)',
      '-webkit-transform': 'translateY(' + slowScroll + 'px)',
      'opacity': opaScroll
    });

  }
};

var scroller = new Scroller();
scroller.init();
* {
  box-sizing: border-box;
}

html,
body {
  background-color: #FEDCC8;
}

body {
  margin: 0;
  position: relative;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  /*   left: 50%; */
  left: 0;
  right: 0;
  bottom: 0;
  /*   margin-left: -1500px; */
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.parallax__cover {
  background: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

.section {
  text-align: center;
  padding: 50px 80px;
  /* position: fixed; */
  z-index: 14;
  /* left: 20px;
      right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */
}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}

header .box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* overflow-x: hidden; */
  overflow-y: auto;
}

header text-box {
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  color: #fff;
  border: 1px solid #fff;
  padding: .5em 3em .2em 3em;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 25px;
  line-height: 2em;
}

header h1,
header h2 {
  margin: 0;
}

.text {
  color: #fff;
  text-decoration: none;
  line-height: 3rem;
  background-color: #282e34;
  padding: 10px 0px;
  margin: 0 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Firewatch Parallax in CSS</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="parallax">
    <div class="parallax__layer parallax__layer__0">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
    </div>
    <div class="parallax__layer parallax__layer__1">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
    </div>
    <div class="parallax__layer parallax__layer__2">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
    </div>
    <div class="parallax__layer parallax__layer__3">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
    </div>

    <header>
      <div class="box">
        <text-box>
          <h1>Test</h1>
        </text-box>
      </div>
    </header>

    <div class="parallax__layer parallax__layer__4">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
    </div>
    <div class="parallax__layer parallax__layer__5">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
    </div>
    <div class="parallax__layer parallax__layer__6">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
    </div>
    <div class="parallax__cover">
      <section class="section section_dark">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
        </p>
      </section>
    </div>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

发生的事情是，当添加溢出时，将滚动添加到div parallax而不是window来检查更改CSS类parallax height:1000px，您会注意到您有2个滚动检查，下面添加了链接在CodePen中，因此将其改回并在div id="par"中添加parallax在JS脚本中也从window更改为document.getElementById（'par'）并在onScroll: function()中从window.scrollY更改为document.getElementById('par').scrollTop

Link

顺便说一句好主意

      var $content = $('.box');

  document.getElementById('par').requestAnimFrame = (function() {
  return document.getElementById('par').requestAnimationFrame ||
  document.getElementById('par').webkitRequestAnimationFrame ||
  document.getElementById('par').mozRequestAnimationFrame ||
    function(callback) {
     window.setTimeout(callback, 1000 / 60);
    };
})();

function Scroller() {
  this.latestKnownScrollY = 0;
  this.ticking = false;
};

Scroller.prototype = {
  init: function() {
    document.getElementById('par').addEventListener('scroll', this.onScroll.bind(this), false);
  },

  onScroll: function() {
    this.latestKnownScrollY =  document.getElementById('par').scrollTop;
    this.requestTick();
  },

  requestTick: function() {
    if (!this.ticking) {
    document.getElementById('par').requestAnimFrame(this.update.bind(this));
    }
    this.ticking = true;
  },

  update: function() {
    var currentScrollY = this.latestKnownScrollY;
    this.ticking = false;    
    var slowScroll = currentScrollY / 2
    var opaScroll = 1.4 - currentScrollY / 200
    $content.css({
      'transform': 'translateY(' + slowScroll + 'px)',
      '-moz-transform': 'translateY(' + slowScroll + 'px)',
      '-webkit-transform': 'translateY(' + slowScroll + 'px)',
      'opacity': opaScroll
    });

  }
};

var scroller = new Scroller();
scroller.init();
* {
  box-sizing: border-box;
}

html,
body {
  background-color: #FEDCC8;
}

body {
  margin: 0;
  position: relative;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  /*   left: 50%; */
  left: 0;
  right: 0;
  bottom: 0;
  /*   margin-left: -1500px; */
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.parallax__cover {
  background: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
  transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
  transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
  transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
  transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
  transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
  transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
  transform: translateZ(0px) scale(1);
}

.section {
  text-align: center;
  padding: 50px 80px;
  /* position: fixed; */
  z-index: 14;
  /* left: 20px;
      right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */
}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}

header .box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* overflow-x: hidden; */
  overflow-y: auto;
}

header text-box {
  transform: translate(-50%, -50%);
  display: inline-block;
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  color: #fff;
  border: 1px solid #fff;
  padding: .5em 3em .2em 3em;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 25px;
  line-height: 2em;
}

header h1,
header h2 {
  margin: 0;
}

.text {
  color: #fff;
  text-decoration: none;
  line-height: 3rem;
  background-color: #282e34;
  padding: 10px 0px;
  margin: 0 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Firewatch Parallax in CSS</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div id="par" class="parallax">
    <div class="parallax__layer parallax__layer__0">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
    </div>
    <div class="parallax__layer parallax__layer__1">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
    </div>
    <div class="parallax__layer parallax__layer__2">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
    </div>
    <div class="parallax__layer parallax__layer__3">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
    </div>

    <header>
      <div class="box">
        <text-box>
          <h1>Test</h1>
        </text-box>
      </div>
    </header>

    <div class="parallax__layer parallax__layer__4">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
    </div>
    <div class="parallax__layer parallax__layer__5">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
    </div>
    <div class="parallax__layer parallax__layer__6">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
    </div>
    <div class="parallax__cover">
      <section class="section section_dark">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
        </p>
      </section>
    </div>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

相关问题
最新问题