窗口滚动不适用于其他情况

Saira 发表于 Dev

赛拉

我正在使用该scroll函数，但是else if块中的代码似乎未在执行。

一旦用户滚动到某个点，我试图隐藏一个div并显示另一个div。

这是我的代码-我在做什么错？

var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + (showOneHeight - 50);
var offSetValue2 = scrolTop + (showTwoHeight2 - 50);
var offSetValue3 = scrolTop + (showThreeHeight3 - 50);
var offSetValue4 = scrolTop + (showFourHeight4 - 50);
// alert(offSetValue3)
$(window).scroll(function() {
  var height = $(window).scrollTop();
  if (height > offSetValue) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeIn('slow');
  } else if (height > offSetValue2) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeIn('slow');
  } else if (height > offSetValue3) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeOut();
    $('.showFour').fadeIn();
  }
});

body {
  margin: 0px;
}

.contentArea {
  display: flex;
  height: 100vh;
}

.boxes {
  width: 50%;
}

.pinned {
  background: rgb(72, 91, 35);
}

h1 {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 20px;
  text-transform: capitalize;
  font-family: system-ui;
  color: #fff;
}

.content {
  position: relative;
}

.box {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.showOne {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div style="height: 500px; background: violet;"></div>
<div style="height: 500px; background:yellowgreen;"></div>
<div class="contentArea">
  <div class="pinned boxes">
    <h1>i am pinned side</h1>
  </div>
  <div class="content boxes">
    <div class="box showOne">
      <strong>paragraph one</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
    <div class="box showTwo">
      <strong>paragraph two</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
    <div class="box showThree">
      <strong>paragraph three</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
    <div class="box showFour">
      <strong>paragraph three</strong>
      <p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
    </div>
  </div>
</div>
<div class="test" style="height: 500px; background: rgb(39, 96, 106);"></div>
<div style="height: 500px; background: rgb(46, 35, 46);"></div>

gianni10049

  if (height > offSetValue) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeIn('slow');
  } else if (height > offSetValue2) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeIn('slow');
  } else if (height > offSetValue3) {
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeOut();
    $('.showFour').fadeIn();
  }

问题是如果有其他条件。else if如果第二个和第三个为真时第一个条件为真，则不执行。

您需要指定高度之间的范围是真的：

if ( (height > offSetValue) && (height < offSetValue2)) {
     //exec
} 
else if ( (height > offSetValue2) && (height < offSetValue3)) {
   //exec
}
else if (height > offSetValue3) {
  // exec
}

这解决了如果/否则（Y）的问题

编辑1：

试试这个来确认：

var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + 500;
var offSetValue2 = scrolTop + 700; 
var offSetValue3 = scrolTop + 900;
var offSetValue4 = scrolTop + 1100;


$(window).scroll(function() {
  var height = $(window).scrollTop();

  if ( (height > offSetValue) && (height < offSetValue2)) {
    console.log(1)
    $('.showOne').fadeOut();
    $('.showTwo').fadeIn('slow');
    $('.showThree').fadeOut();
    $('.showFour').fadeOut();
  } else if ( (height > offSetValue2) && (height < offSetValue3)) { 
    console.log(2)
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeIn('slow');
    $('.showFour').fadeOut();
  } else if (height > offSetValue3) {
    console.log(3)
    $('.showOne').fadeOut();
    $('.showTwo').fadeOut();
    $('.showThree').fadeOut('slow');
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。