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从＆＃34;固定＆＃34;变化绝对＆＃34;绝对＆＃34;并且表格保持不变。问题是，我希望它恢复到＆＃34;固定＆＃34;当你开始向上滚动页面时（我的其他声明）。这部分什么都不做。

这是一个粗略的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

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

1 个答案: