CODEWITHSUNDEEP
javascriptjquerycss
lbollu
lbollu

Reputation: 77

Sticky div - stop scrolling at certain point

I have a fixed div that follows the page when it scrolls past the top of the page.

I would like it to stop scrolling once it reaches the bottom of a particular div. I am not great with javascript.

Basically needs to remove the class .affix. But it might need an offset so that it doesn't overlap into the layout below.

I have looked at other articles but the div starts off fixed whereas mine becomes fixed.

JSfiddle: https://jsfiddle.net/8t1ddL2h/

Javascript: 

var stickySidebar = $('.sticky-sidebar').offset().top;
        $(window).scroll(function() {  
            if ($(window).scrollTop() > stickySidebar) {
                $('.sticky-sidebar').addClass('affix');
            }
            else {
                $('.sticky-sidebar').removeClass('affix');
            }  
        });

Any help would be appreciated

Lee

Upvotes: 2

Views: 3073

Answers (2)

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

You can also try it just add JavaScript. it will automatic calculate height of left panel. you need to change in css when it remove the css.

var othercon = $('.other-content').offset().top;
var sliderheight = $( ".sticky-sidebar" ).height();
$(window).scroll(function() {  
        if ($(window).scrollTop() >= othercon-sliderheight) {
            $('.sticky-sidebar').removeClass('affix');
              // need to change here according to your need
        }

    });

Upvotes: 1

Rajesh Karunakaran
Rajesh Karunakaran

Reputation: 169

Try this Fiddle

$(document).ready(function() {    
  var $sticky = $('.sticky-sidebar');
  var $stickyrStopper = $('.other-content');
  if (!!$sticky.offset()) { // make sure ".sticky" element exists

    var generalSidebarHeight = $sticky.innerHeight();
    var stickyTop = $sticky.offset().top;
    var stickOffset = 0;
    var stickyStopperPosition = $stickyrStopper.offset().top;
    var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
    var diff = stopPoint + stickOffset;

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

      if (stopPoint < windowTop) {
          $sticky.css({ position: 'absolute', top: diff });
      } else if (stickyTop < windowTop+stickOffset) {
          $sticky.css({ position: 'fixed', top: stickOffset });
      } else {
          $sticky.css({position: 'absolute', top: 'initial'});
      }
    });
  }
});

Upvotes: 2

Related Questions