Breaking News: Grepper is joining You.com. Read the official announcement!

jquery sticky sidebar on scroll

7uc1f3r answered on June 17, 2022 Popularity 7/10 Helpfulness 4/10

answer jquery sticky sidebar on scroll

jquery sticky sidebar on scroll

Comment

$( document ).ready(function() {
  console.log( "document ready!" );

  var $sticky = $('.sidebarClassname');
  var $stickyrStopper = $('.footerClassName');
  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 });
          $sticky.addClass('content_fixed');
      } else {
          $sticky.css({position: 'absolute', top: 'initial'});
      }
    });

  }
});

Popularity 7/10 Helpfulness 4/10 Language javascript

Source: codepen.io

Tags: javascript jquery scroll sidebar sticky

Link to this answer
Share Copy Link

Contributed on Jun 17 2022

7uc1f3r

0 Answers Avg Quality 2/10

jquery sticky sidebar on scroll

Contents

More Related Answers

jquery sticky sidebar on scroll

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.