fadeIn fadeOut JQuery добавить и удалить класс? - PullRequest
Новая
       45

fadeIn fadeOut JQuery добавить и удалить класс?

0 голосов
/ 13 июля 2020

Я пытаюсь сделать прикрепленную боковую панель формы на моем веб-сайте Squarespace. Это JQuery, который я использую для создания липкой боковой панели. Я пытаюсь создать эффект затухания, когда форма присоединяется к эффекту прокрутки и затухания прямо перед тем, как форма касается нижнего колонтитула (и наоборот, для прокрутки вверх).

Вот мой JQuery скрипт : 

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
jQuery("document").ready(function($){
var nav = $('form');
var footerTop = $('footer').offset().top;
var navHeight = $('#form').outerHeight();
var stopPoint = footerTop - navHeight - 70;
 $(window).scroll(function () {
   if ($(this).scrollTop() >= 450) {
      nav.addClass("form-fixed");
   } else {
      nav.removeClass("form-fixed");
  }
   if ($(this).scrollTop() >= 2740) {
      nav.addClass("form-stop");
   } else {
      nav.removeClass("form-stop");
   }
  });
 });
</script>

Вот мой CSS: 

/*Home V2*/
.form
  {posiiton: relative;}


.form-fixed 
  {position: fixed; 
   background-color: #F5FFFB; 
   top: 80px;
   right: 7%;
   z-index: 9999;
   width: 20%;}

.form-stop
  {position: absolute;
   bottom: 0;
   top: auto;
   left: 0;}

Я пытался прикрепить .fadeIn () или .fadeOut () в конце добавления / удаления команды класса. Это работает, но либо только во время одной команды, либо постепенно появляется и исчезает. Любая помощь?

...