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

5 Comments

  1. homeforsell

    Please check again for this TIP.

    It’s not OK for both ways!

  2. H.K. Latiyan

    It works fine, but this tip requires footer layout in the theme, so go to wp-admin->appearance->customize->footer->footer style and select default footer.

Leave A Comment?