Блог

Главная - Вопросы по программированию - прокрутка окна не работает с if else if

прокрутка окна не работает с if else if

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я использую scroll функцию, но код в моих else if блоках, похоже, не выполняется.

Я пытаюсь скрыть один 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>

Комментарии:

1. нет, на самом деле мне нравится работать, но есть некоторые проблемы с else if

2. Кто-то исправил вашу ссылку на jQuery. Можете ли вы использовать больше слов, чтобы описать, что вам нужно сделать сейчас?

Ответ №1:

   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();
  }

Проблема заключается в других условиях if. Else if не выполняется, потому что первое условие всегда выполняется, когда второе и третье имеют значение true.

Вам нужно указать диапазон между высотами, которые действительно являются истинными:

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

Это решает проблемы с if / else if (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) amp;amp; (height < offSetValue2)) {
    console.log(1)
    $('.showOne').fadeOut();
    $('.showTwo').fadeIn('slow');
    $('.showThree').fadeOut();
    $('.showFour').fadeOut();
  } else if ( (height > offSetValue2) amp;amp; (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');
  }
});

Комментарии:

1. Вы пытались прокручивать курсор, а не колесо мыши? я думаю, что разрыв между полем меньше для запуска всего остального, если правильно. Я пробовал много раз, и теперь все работает нормально.

2. я попытался увеличить еще немного промежутка между триггерами, но все равно он не работает. не могли бы вы поместить код внутри оператора condition?

3. Я отредактировал ответ в качестве примера (Редактирование 1). В примере есть статические значения для запуска изменения, и вы можете увидеть в журнале консоли значения 1/2/3 при запуске else if.

4. большое вам спасибо, дорогая. это действительно мне очень помогло <3

5. Нет проблем, дорогой (Y) <3