“粘性”侧栏 - 设置底部边距

时间:2014-04-21 21:33:35

标签: javascript jquery html css sticky

我有一个"粘"与jQuery的侧边栏联系表单,当页面向下滚动时,它转向固定位置的div。我的问题是它在向下滚动时与页脚重叠。有没有办法让我可以设置它不会在其底部边距开始击中页脚时向下滚动?如果可能的话,我不确定如何检测到该事件,因为它是一个响应式网站和页脚的高度变化。

CSS:

.sticky {
  margin-top: 38px;
  max-width: 300px;
  padding-top: 20px;
  z-index: 0;
}

jQuery的:

jQuery(function(){ // document ready

  if (!!jQuery('.sticky').offset()) { // make sure ".sticky" element exists

    var stickyTop = jQuery('.sticky').offset().top; // returns number

    jQuery(window).scroll(function(){ // scroll event

      var windowTop = jQuery(window).scrollTop(); // returns number

      if (stickyTop < windowTop){
        jQuery('.sticky').css({ position: 'fixed', top: 0 });
      }
      else {
        jQuery('.sticky').css('position','static');
      }

    });

  }

提前全部谢谢。

0 个答案:

没有答案