How to move a div from right to left when page is being scrolled down?

How to move a div from right to left when page is being scrolled down?

Hi,
  I want to move a div from right to left ,when page is scrolled down .I am new to using jquery and i got some code from jsfiddle ,which i tried to use ,but unable to get desired solution.The div element is nested inside other div elements ,does that also effect the transition? Any help would be gretaly appreciated .Thanks

        
  1.     <script src="js/jquery.js"></script>
      <script src="js/jquery-migrate-1.2.1.js"></script>
      <script src="search/search.js"></script>
        <script src="Scripts/jquery-ui-1.11.4.js"></script>
        <script>
            $(window).scroll(function () {
            var effect = 'slide';

            // Set the options for the effect type chosen
            var options = { direction: 'right' };

            // Set the duration (default: 400 milliseconds)
            var duration = 500;

            $('#grid_8 s51').toggle(effect, options, duration);
            })</script>