Блог

Главная - Вопросы по программированию - Как я могу вернуть ширину div после анимации?

Как я могу вернуть ширину div после анимации?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Вот что я пытаюсь сделать:

В position:sticky div есть прямоугольник (id = mysquare). После небольшой прокрутки ширина mysquare должна уменьшиться с помощью анимации jquery. Затем, при прокрутке назад, mysquare должен мгновенно вернуться к своей первоначальной ширине.

Проблема:

Бит анимации работает нормально. Что не работает, так это возврат к исходной ширине mysquare. При прокрутке назад после того, как mysquare уменьшится до 100 пикселей, он останется прежним (хотя теоретически он должен вернуться к 150 пикселям).

 var headheight = $(".myheading").height();

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > headheight) {
      //if scrolled past myheading
      //Gradually change the width of the square to 100px, from 150px
      $("#mysquare").animate({
        width: "100px",
      }, 1500);

    }
    if ($(this).scrollTop() < headheight) {
      //If not scrolled past myheading
      //Keep the square big
      $("#mysquare").width("150px");
    }
  })
}); 
 div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
  font-size: 20px;
}

#mysquare {
  height: 50px;
  background-color: #555;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>

  <div class="myheading" style="height: 50px;"></div>
  <div class="sticky">Hello
    <div id="mysquare" style="width 150px;">

    </div>
  </div>

  <main style="height:500px;"></main>
</body>

</html>

JSFiddle: https://jsfiddle.net/82n16x07/7 /

Кстати, mysquare, похоже, занимает всю ширину экрана при первой загрузке. Любая помощь в этом также будет оценена.

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

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

2. @cloned Я посмотрю на это, поскольку это определенно кажется более чистым. Однако, похоже, это не решает корень моей проблемы, которая связана с шириной mysquare, не возвращающейся после прокрутки назад.

Ответ №1:

после анимации вам нужно удалить элемент и заменить его, чтобы применить другой css

 var headheight = $(".myheading").height();

$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > headheight) {
    
      //if scrolled past myheading
      //Gradually change the width of the square to 100px, from 150px
      $("#mysquare").animate({
        width: "100px",
      }, 1500);

    }
    if ($(this).scrollTop() < headheight) {
    
    
    var elm = document.getElementById('mysquare');
    var newone = elm.cloneNode(true);
    elm.parentNode.replaceChild(newone, elm);
    
      //If not scrolled past myheading
      //Keep the square big
      $("#mysquare").width("500px");
      
      
      
    }
  })
}); 
 div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
  font-size: 20px;
}

#mysquare {
  height: 50px;
  background-color: #555;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>

  <div class="myheading" style="height: 50px;"></div>
  <div class="sticky">Hello
    <div id="mysquare" style="width 150px;">

    </div>
  </div>

  <main style="height:500px;"></main>
</body>

</html>

Ответ №2:

Ваша первоначальная проблема с шириной вызвана неправильной style директивой с отсутствующим двоеточием:

 <div id="mysquare" style="width 150px;">

должно быть:

 <div id="mysquare" style="width: 150px;">

Основная проблема вызвана тем фактом, что animate() функция вызывается повторно, когда условие прокрутки истинно, и эти вызовы функций накапливаются. Если вы подождете достаточно долго, они очистятся, и поле вернется к своему нормальному размеру.

Чтобы исправить это, вы можете добавить shrunk флаг, чтобы определить, уменьшено поле или нет, и проверить этот флаг, чтобы определить, следует ли выполнять новый animate() вызов.

 var headheight = $(".myheading").height();
var shrunk=false;
$(function() {
  $(window).scroll(function() {
  
    if ($(this).scrollTop() > headheight amp;amp; !shrunk) {
      //if scrolled past myheading
      //Gradually change the width of the square back to the size of the new image
           shrunk=true;
      $("#mysquare").animate({
        width: "100px",
      }, 1500);

    }
    if ($(this).scrollTop() < headheight) {
      //If not scrolled past myheading
      //Keep the square big
      shrunk=false;
      $("#mysquare").width("150px");
     }
  })
}); 
 div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
  font-size: 20px;
}

#mysquare {
  height: 50px;
width:150px;
  background-color: #555;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>

  <div class="myheading" style="height: 50px;"></div>
  <div class="sticky">Hello
    <div id="mysquare" style="width: 150px;">

    </div>
  </div>

  <main style="height:500px;"></main>
</body>

</html>

Ответ №3:

Просто попробуйте с этим. надеюсь, это сработает для вас.

 var lastScrollTop = 0;
$(window).scroll(function(event){
   var thisScrolltop = $(this).scrollTop();
   if (thisScrolltop > lastScrollTop){
       // write code here, when down scroll
   } else {
      // write code here, when up scroll
   }
   lastScrollTop = thisScrolltop;
});