javascript - 带有停止点的 jquery 的粘性 div

Question

尝试在右侧边栏中制作粘性横幅 http://lukich.co.nf/laestrella/但无法弄清楚如何在页脚上方红线之前定义它的停止点几个像素。有人可以帮忙吗？脚本:

$(function(){ // document ready
  if (!!$('#sticky').length) { // make sure "#sticky" element exists
  var el = $('#sticky');

  var stickyTop = $('#sticky').offset().top -100;

  $(window).scroll(function(){ // scroll event
      var windowTop = $(window).scrollTop(); 

      if (stickyTop < windowTop){
         el.css({ position: 'fixed', top: 50 });
      }
      else {
         el.css('position','static');
      }         

    });
  }
});

Answer 1

我访问了提到的网站并尝试使用浏览器控制台进行修复。请调试下面的代码肯定会起作用。只是你必须分析一下。

var el = $('#sticky');
var stickyTop = $('footer').offset().top;
$(window).scroll(function(){ 
var windowTop = $(window).scrollTop(); 
var z= $(window).height();
if ($(this).scrollTop() > 50) { 
   if(windowTop + z > stickyTop){
      $('#sticky').css('display','block');
   }
   else
   {
       $('#sticky').css('display','none');
    }
} 

});