CODEWITHSUNDEEP
javascriptjqueryscrollsticky
Leonid
Leonid

Reputation: 55

Sticky div with jquery with stop point

Trying to make a sticky banner in the right sidebar on http://lukich.co.nf/laestrella/ But can't figure out how to define it's stop point a few pixels before the red line above footer. Can someone help please. the script:

$(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');
      }         

    });
  }
});

Upvotes: 1

Views: 1160

Answers (1)

anand vishwakarma
anand vishwakarma

Reputation: 79

I visited mentioned the site and tried to give fix by using browser console. Please debug below code surely it will work. Just you have to analyse little bit.

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');
    }
}

});

Upvotes: 1

Related Questions