Course Details Widget Follow the User when they Scroll

Please go to your wplms-customizer.php file in wplms customizer plugin or functions.php in your child theme and add the following code at the bottom of the file.

add_action('wp_footer','wplms_fix_course_pricing');
function wplms_fix_course_pricing(){
  if(!is_singular('course'))
    return;
 
  ?>
  <style>
  .widget.pricing.fixed{
    position: fixed;
    top: 80px;
    z-index: 99;
  }
  </style>
 
  <script>
  jQuery(document).ready(function($){
    var windowWidth = $(window).width();
    if(windowWidth >= 768){
      $(".widget.pricing").each(function(){
        var $this = $(this);
        var height = $this.height();
        var footer_top = $('footer').offset().top;
        var left = $this.offset().left;
        var width = $this.width();

        $(window).scroll(function(event){
            var st = $(this).scrollTop();
            if(st > height && (st + height + 70) < footer_top ){
              $this.addClass('fixed');
              $this.css('left',left+'px');
              $this.css('width',(width+30)+'px');
            }else{
              $this.removeClass('fixed');
              $this.attr('style','');
            }
         });

      });
    }  
  });
  </script>
  <?php
}

 

Was this article helpful?

Related Articles

Leave A Comment?