使用jQuery使表单随页面滚动

Question

我正在使用jQuery使表单随页面滚动。我使用的方法非常复杂，我正在寻找一种更流畅，更有效的方法来实现这一效果。

这个想法是表单仅向下滚动一定数量的像素后，才随页面一起移动。然后停止以其他像素滚动页面。在这两个数量之间，div顶部的边距取决于滚动量。

这不能很好地工作，因为它取决于用户屏幕的大小。这造成了混乱的错误，使表单无法控制地移动。如果有人有更好的主意怎么做，我很想听听他们的意见。

$(window).scroll(function() {
  var wScroll = $(this).scrollTop();
  console.log(wScroll);

  if ($(".formLarge").css("display") == "block") {
    if (wScroll > 400) {
      $(".formLarge").css('margin-top', wScroll - ($(window).height()) * .4);
    }
    if (wScroll > 1100) {
      $(".formLarge").css("margin-top", "600px");
    }
    if (wScroll < 400) {
      $(".formLarge").css("margin-top", "0px");
    }
    if ($(".formLarge").css("margin-top") < "0px") {
      $(".formLarge").css("margin-top", "0px");
    }
  }

  /* S M A L L E R   S C R E E N S */
  if ($('.formSmall').css("display") == "block") {
    if (wScroll < 750) {
      $(".formSmall").css("margin-top", "0px");
    }
    if (wScroll > 750) {
      $('.formSmall').css('margin-top', wScroll - ($(window).height()) - 10);
    }
    if (wScroll > 1800) {
      $('.formSmall').css("margin-top", "800px");
    }
    if ($('.formSmall').css("margin-top") < "0px") {
      $('.formSmall').css('margin-top', '0px');
    }
  }

  /* S M A L L E S T   S C R E E N S */
  if ($('.formSmallest').css("display") == "block") {
    if (wScroll < 750) {
      $(".formSmallest").css("margin-top", "0px");
    }
    if (wScroll > 750) {
      $('.formSmallest').css('margin-top', wScroll - ($(window).height()) - 150);
    }
    if (wScroll > 1650) {
      $('.formSmallest').css("margin-top", "750px");
    }
    if ($('.formSmallest').css("margin-top") < "0px") {
      $('.formSmallest').css('margin-top', '0px');
    }
  }
});

@media only screen and (min-height: 1000px) {
  .formSmall {
    display: none !important;
    z-index: 9;
  }
}

@media only screen and (max-height: 1000px) {
  .formLarge {
    display: none !important;
    z-index: 9;
  }
}

@media only screen and (min-height: 1000px) {
  .formLarge {
    display: block !important;
    z-index: 9;
  }
}

@media only screen and (max-height: 1000px) {
  .formSmall {
    display: block !important;
    z-index: 9;
  }
}

@media only screen and (max-height: 900px) {
  .formSmall {
    display: none !important;
    z-index: 9;
  }
}

@media only screen and (min-height: 900px) {
  .formSmallest {
    display: none !important;
    z-index: 9;
  }
}

@media only screen and (max-height: 900px) {
  .formSmallest {
    display: block !important;
    z-index: 9;
  }
}

@media only screen and (max-height: 600px) {
  .formSmallest {
    display: none !important;
    z-index: 9;
  }
}