sidebar-fixed-on-scroll.js

import $ from 'jquery';

export const onScrollFixSidebar = function() {
  const relatedPosts = $('.related-post')
  const body = $('body')
  
  if(relatedPosts.length === 0 || body.width() <= 768) return

  const sidebar = $('.sidebar')
  const relatedPostsPositionTop = relatedPosts.position().top
  const clearMenu = $('.clear-menu')
  const footer = $('.footer')
  const footerPositionTop = footer.position().top

  $(window).scroll(function() {

    let scroll = $(window).scrollTop();
    let scrollDiff = scroll + clearMenu.height()
    let scrollRelated = scrollDiff + relatedPosts.outerHeight()
    let footerPosition = footer.position().top

    if ( scrollDiff <= relatedPostsPositionTop ) {
      sidebar.removeClass('is-fixed');
    } else {
      if ( scrollRelated >= footerPosition ) {
        sidebar.removeClass('is-fixed').addClass('is-fixed-bottom');
      } else {
        sidebar.removeClass('is-fixed-bottom').addClass('is-fixed');
      }
    }
	});
};