Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    96
    Thanks
    1
    Thanked 13 Times in 13 Posts

    Question about my JS

    So i'm using this script to have an image scroll down the page with the user and it works beautifully except idk how to get it to stop scrolling when it reaches the bottom of the page. Here's the code.

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script>
    $().ready(function() {
    var $scrollingDiv = $("#scrollingDiv");
    $(window).scroll(function(){

    if($(window).scrollTop() > 1100 ){
    $scrollingDiv
    .stop()
    .animate({"marginTop": ($(window).scrollTop() - 1050) + "px"}, "fast" );
    }

    if($(window).scrollTop() <= 920 ){
    $scrollingDiv
    .stop()
    .animate({"marginTop": "0px"}, "fast" );
    }

    });
    });
    </script>

  • #2
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the code I use for a very similar effect. Instead of using a margin, use positioning. You can the animate function instead of the css function in order to create something a little smoother, but my implementation doesn't require the element to try to catch up to the user, it just stays with them.

    Code:
    var $JOE = {};
    	$JOE.scrollWPage = function(obj, start, offsetTop) {
    		var winTop = jQuery(window).scrollTop(),
    			offsetTop = offsetTop || 20;
    		obj.css('position',((winTop+offsetTop > start) ? 'fixed' : 'absolute'));
    		obj.css('top', ((winTop+offsetTop) > start) ? offsetTop+'px' : '');
    	};
    
    
     (function() {
    	var tabs 	= $(".gen-tabs"),
    		start 	= tabs.offset().top;
    	
    	var scrollTabs = function() {
    		$JOE.scrollWPage(tabs, start);
    	}
    	
    	jQuery.event.add(window, "scroll", scrollTabs);
     }());
    
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •