AspBucket offers ASP.NET, C#, VB, Jquery, CSS, Ajax, SQL tutorials. It is the best place for programmers to learn

Thursday 16 June 2016

How to make div follow scrolling on a web page with Jquery?

In this article I am going to discuss How to make div follow scrolling on a web page with Jquery? You just need to add a script code in your header area to get this functionality.

Script Code:

   (function ($) {
            var element = $('#your_div_id'),
                originalY = element.offset().top;
           
            // Space between element and top of screen (when scrolling)
            var topMargin = 100;           
            // Should probably be set in CSS; but here just for emphasis
            element.css('position', 'relative');
            $(window).on('scroll', function (event) {
                var scrollTop = $(window).scrollTop();  
                    element.stop(false, false).animate({
                        top: scrollTop < originalY
                                ? 0
                                : scrollTop - originalY + topMargin
                    }, 0);
                
            });
        })(jQuery);
Replace the "your_div_id" from your webpage div id.  Div strats scrolling with webpage scroll.

0 comments :

Post a Comment

  • Popular Posts
  • Comments