jQuery - 使粘性页脚停在页脚顶部并在向上滚动时再次变粘

Question

我有一个粘贴在每个页面上的表单，我需要它在到达页脚顶部时不要粘。 我有这个工作正常，但我需要它在向上滚动页面时再次变粘。 有什么明显的错误吗？

$(window).scroll(function(){
     var footerTopPos = $('#footer-wrapper').offset().top;
     var navBottomPos = $('#footer-form-wrapper').offset().top;
     if(navBottomPos >= footerTopPos) {
         $('#footer-form-wrapper').addClass('sticky');
     } else {
         $('#footer-form-wrapper').removeClass('sticky');
     } 
 });

澄清一下，第一部分完美无缺。 css从“固定”变为“绝对”，形式保持不变。 问题是，当你开始向上滚动页面时，我希望它恢复为“修复”（我的其他声明）。 这部分什么都不做。

这是一个粗略的jsfiddle，以显示问题http://jsfiddle.net/L693f5bg/14/

Answer 1

- 编辑 -

为了保持你已经开始使用它而不使用任何其他插件，你必须确保你在滚动功能之外声明变量，这样每次滚动和改变它的位置时它都不会改变。

 $(function () {
   var footerTopPos = $('#footer-form-wrapper').offset().top;
   $(window).scroll(function () {
     var windowTopPos = $(window).scrollTop();
     if (windowTopPos >= footerTopPos) {
         $('#footer-form-wrapper').css('position', 'absolute');
         $('#footer-form-wrapper').css('top', '0');
     } else {
         $('#footer-form-wrapper').css('position', 'fixed');
         $('#footer-form-wrapper').css('bottom', '0');
         $('#footer-form-wrapper').css('top', 'auto');
     }
   });
 });

更新了你的JSFiddle

我个人建议使用Waypoints.js和粘性元素插件。 它做的一切都很干净，易于实施。 包括jquery.waypoints.js和粘滞插件然后使用以下命令初始化：

var sticky = new Waypoint.Sticky({
  element: $('#footer-wrapper')[0],
  offset: '90%',
  stuckClass: 'unstuck'
});

我使用Waypoints.js插件更新了JSFiddle