Saturday 10 October 2015

Jquery fix div position on scroll example

As a UI developer its very necessary to know the how to manage html element in Jquery.  These days many of responsive and fancy design are on top of the template. But sometime we need to fix some html element in order to display some contents or ads on top at constant position, here are few line code hope will help you :-)

Example 1:
       

 <script>  
     jQuery(function ($) {  
       function fixDivPosition() {  
         var $cache = $('#ads');  
         if ($(window).scrollTop() > 300)  
           $cache.css({  
             'position': 'fixed',  
             'top': '50px'  
           });  
         else  
           $cache.css({  
             'position': 'relative',  
             'top': 'auto'  
           });  
       }  
       $(window).scroll(fixDivPosition);  
       fixDivPosition();  
     });  
   </script> 

       
 

Example 2
       
 jQuery code

  $(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#task_flyout').addClass('fixed');
      } else {
          $('#task_flyout').removeClass('fixed');
      }
  });
css code

.fixed {position:fixed; top:0; left:0;}