Нужно повторение анимации при прокрутке страницы вверх/вниз и устранить некорректные эффекты при наведении курсора (jQuery и CSS)

Question

Нужно повторение анимации при прокрутке страницы вверх/вниз и устранить некорректные эффекты при наведении курсора (jQuery и CSS)

Рейтинг: 1Ответов: 0Опубликовано: 04.05.2023

Здравия желаю!

Уже четыре дня занимаюсь этой задачей... Пожалуйста, помогите с решением.

Задача: — Если прокручиваем страницу до блока с классом Section-1, то Справа экрана появляется 1-я (красная) кнопка с иконкой и текстом. Как только прокручиваем страницу до блока с классом Section-3, то Красная кнопка трансформируется (с эффектом анимации) в мини-кнопку (с иконкой, без текста).

— Если прокручиваем страницу до блока с классом Section-6, то Справа экрана появляется 2-я (зелёная) кнопка с иконкой и текстом. Как только прокручиваем страницу до блока с классом Section-8, то Зелёная кнопка трансформируется (с эффектом анимации) в мини-кнопку (с иконкой, без текста).

— Если прокручиваем страницу до блока с классом Footer, то Убираем кнопки в изначальное место (в Footer).

— Если кнопка выведена в мини-версии, то при наведении курсора - показываем обычную версию (с иконкой и текстом), и убираем обычную версию, если курсор отвели от кнопки.

Ошибки: — При наведении курсора на обычную версию кнопки (если она даже не успела трансформироваться в мини-версию), а затем убираем курсор, то она приобретает вид мини-версии, но это убирается при малейшей прокрутке в любую сторону.

— Не получается достигнуть обратных эффектов при прокрутке страницы вверх по достижении соответствующих блоков.

P.S.: сильно не пинайте - это первый опыт сделать что-то в JS, впрочем и в CSS подобного ранее не делал.

jQuery(document).ready(function(){
    jQuery(window).scroll(function() {    
    var scroll = jQuery(window).scrollTop();
    var order_now = $(".order_now");
    var vacancies_now = $(".vacancies_now");
    var section_1 = ($('.t4-section-1').offset().top);
    var section_2 = ($('.t4-section-2').offset().top);
    var section_3 = ($('.t4-section-3').offset().top);
    var section_4 = ($('.t4-section-4').offset().top);
    var section_5 = ($('.t4-section-5').offset().top);
    var section_6 = ($('.t4-section-6').offset().top);
    var section_7 = ($('.t4-section-7').offset().top);
    var section_8 = ($('.t4-section-8').offset().top);
    var section_9 = ($('.t4-section-9').offset().top);
    var footer = ($('.t4-footer').offset().top);
    
    var scrollPos = $(document).scrollTop();
    
    if (scrollPos >= section_1) {
        order_now.addClass("btn-right")
    }
      if (scrollPos >= section_3) {
        order_now.removeClass("btn-right")
        order_now.addClass("compact animated rubberBand")
        
        order_now.mouseover(function(){
        order_now.removeClass("compact")
        order_now.addClass("btn-right")
    })
        order_now.mouseleave(function(){
        order_now.removeClass("btn-right")
        order_now.addClass("compact")
    })
    }
      if (scrollPos < section_3) {
        order_now.removeClass("compact")
        order_now.addClass("btn-right")
    }
      if (scrollPos >= footer) {
        order_now.removeClass("btn-right compact")
    }
      if (scrollPos < section_1) {
        order_now.removeClass("btn-right");
    }

    if (scrollPos >= section_6) {
        vacancies_now.addClass("btn-right");
        vacancies_now.removeClass("btn-right")
        vacancies_now.addClass("compact")
        
        vacancies_now.mouseover(function(){
        vacancies_now.removeClass("compact")
        vacancies_now.addClass("btn-right")
    })
        vacancies_now.mouseleave(function(){
        vacancies_now.removeClass("btn-right")
        vacancies_now.addClass("compact")
    })
    }
      if (scrollPos > section_8) {
        vacancies_now.removeClass("btn-right")
        vacancies_now.addClass("compact animated rubberBand")
    }
      if (scrollPos < section_8) {
        vacancies_now.removeClass("compact")
        vacancies_now.addClass("btn-right")
    }
      if (scrollPos >= footer) {
        vacancies_now.removeClass("btn-right compact")
    }
      if (scrollPos < section_6) {
        vacancies_now.removeClass("btn-right");
    }
});
});

/****default buttons****/

.order_now_btn {
height: 63px;
position: relative;
}

.vacancies_now_btn {
height: 63px;
position: relative;
}

.order_now > a {
font-weight: 600;
padding: 14px 28px;
display: inline-block;
////////*min-width: 180px;*////////
text-align: center;
font-size: 15px;
border-radius: 6px;
box-shadow: 0 0 20px 5px #ccc;
transition: 0.5s;
left: 50%;
position: absolute;
transform: translateX(-50%);
}

.vacancies_now > a {
font-weight: 600;
padding: 14px 28px;
display: inline-block;
////////*min-width: 180px;*////////
text-align: center;
font-size: 15px;
border-radius: 6px;
box-shadow: 0 0 20px 5px #ccc;
transition: 0.5s;
left: 50%;
position: absolute;
transform: translateX(-50%);
}

.order_now {
text-align: center;
transition: 0.5s;
}

.vacancies_now {
text-align: center;
transition: 0.5s;
}

.order_now > a:hover {
background: #DC3545;
  transition: 0.1s;
}

.vacancies_now > a:hover {
background: #28A745;
  transition: 0.1s;
}

.order_now > a:before {
content: 'Заказать';
}

.vacancies_now > a:before {
content: 'В Команду';
}

.order_now > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #DC3545;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.vacancies_now > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #28A745;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.order_now.btn-right > a {
left: calc(100% - 146px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.vacancies_now.btn-right > a {
left: calc(100% - 156px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.order_now.btn-right {
position: fixed;
width: calc(100% + 50px);
left: 0;
top: calc(50% - 80px);
transition: 0.5s;
z-index: 999999 !important;
}

.vacancies_now.btn-right {
position: fixed;
width: calc(100% + 53px);
left: 0;
bottom: calc(60% - 110px);
transition: 0.5s;
z-index: 999999 !important;
}

@media(max-width:479px) {
.order_now.btn-right > a {
left: calc(100% - 112px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 100px;
font-size: 12px;
padding: 5px 10px;
}
.order_now > a i {
margin-right: 3px;
}
}

@media(max-width:479px) {
.vacancies_now.btn-right > a {
left: calc(100% - 112px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 100px;
font-size: 12px;
padding: 5px 10px;
}
.vacancies_now > a i {
margin-right: 3px;
}
}

/****compact buttons****/

.order_now.compact > a:hover {
background: #DC3545;
transition: 0.1s;
}

.vacancies_now.compact > a:hover {
background: #28A745;
transition: 0.1s;
}

.order_now.compact > a:before {
content: '';
}

.vacancies_now.compact > a:before {
content: '';
}

.order_now.compact > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #DC3545;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.vacancies_now.compact > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #28A745;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.order_now.compact > a {
left: calc(100% - 116px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.vacancies_now.compact > a {
left: calc(100% - 116px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.order_now.compact {
position: fixed;
width: calc(100% + 60px);
left: 0;
top: calc(50% - 80px);
transition: 0.5s;
z-index: 999999 !important;
}

.vacancies_now.compact {
position: fixed;
width: calc(100% + 60px);
left: 0;
bottom: calc(60% - 90px);
transition: 0.5s;
z-index: 999999 !important;
}

@media(max-width:479px) {
.order_now.compact > a {
left: calc(100% - 100px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 50px;
font-size: 12px;
padding: 5px 10px;
}
.order_now > a i {
margin-right: 0px;
}
}

@media(max-width:479px) {
.vacancies_now.compact > a {
left: calc(100% - 100px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 50px;
font-size: 12px;
padding: 5px 10px;
}
.vacancies_now > a i {
margin-right: 0px;
}
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Bootstrap 4 CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js"></script>
  <!-- Bootstrap 4 JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
  <!-- Font Awesome 5 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
  <!-- Animate.style -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet">
</head>
<body>

<div class="container container-fluid bg-dark text-white">
 <div class="row">
  <div class="col">
   <div class="t4-hero">
    <h3>Hero</h3>
     <p class="h5 text-center text-info">(Not show any «order_now» Buttons)</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-1">
    <h3>Section 1</h3>
     <p class="h5 text-center text-info">(Start «order_now» Button)</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-2">
    <h3>Section 2</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-3">
    <h3>Section 3</h3>
     <p class="h5 text-center text-info">(Start «order_now.compact» Button)<br>and<br>(Show transform animation if Scroll page Up&Down)</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-4">
    <h3>Section 4</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-5">
    <h3>Section 5</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-6">
    <h3>Section 6</h3>
     <p class="h5 text-center text-info">(Start «vacancies_now» Button)</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-7">
    <h3>Section 7</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-8">
    <h3>Section 8</h3>
     <p class="h5 text-center text-info">(Start «vacancies_now.compact» Button)<br>and<br>(Show transform animation if Scroll page Up&Down)</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-section-9">
    <h3>Section 9</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

   <div class="t4-footer">
    <h3>Footer</h3>
<p class="h5 text-center text-info">(Default position for «order_now» Buttons)</p>

<!--Start Code «order_now» Button-->
<div class="order_now_btn">
<div class="order_now">
<a href="#" class="btn btn-danger">
<i class="fas fa-shopping-bag"></i> 
</a>
</div>
</div>
<!--End Code «order_now» Button-->

<!--Start Code «vacancies_now» Button-->
<div class="vacancies_now_btn">
<div class="vacancies_now">
<a href="#" class="btn btn-success">
<i class="fas fa-user-graduate"></i> 
</a>
</div>
</div>
<!--End Code «vacancies_now» Button-->

   </div>

   <div class="t4-footnav">
    <h3>Footnav</h3>
     <p class="h5 text-center text-info">(Not show any «order_now» Buttons)</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div>

  </div>
 </div>
</div>

</body>
</html>

jquery hover responsive прокрутка animate

Источник: Stack Overflow на русском

Нужно повторение анимации при прокрутке страницы вверх/вниз и устранить некорректные эффекты при наведении курсора (jQuery и CSS)

Ответы