startv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource
via CSS Lint

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource
via JS Hint

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

HTML

            
              <div id="header">Scroll Down</div>
<div id="main">
	<div id="container"></div>
  Keep Going!
</div>
<div id="footer">You Made It!</div>
            
          
!

CSS

            
                body{
    border:0;
    font-family:arial;
    font-size:50px;
    line-height:500px;  
    margin:0 auto;
    padding:0;
    text-align:center;
    width:960px;
  }
  #header{
    background:#faa;
    height:500px;
  }
  #footer{
    background:#aaf;
    height:500px;
  }
  #main{
    background:#afa;
    height: 1800px;
    line-height:1800px;
    position: relative;
  }
    #container{
       background: none repeat scroll 0 0 orange;
       height: 200px;
       position: absolute;
       right: 10px;
       top: 10px;
       width: 200px;
    }
            
          
!

JS

            
              jQuery(document).ready(function($){
	//variables
	var $window = $(window);
	var $container = $("#container");
	var $main = $("#main");
	var window_min = 0;
	var window_max = 0;
	var threshold_offset = 50;
	/*
	 set the container's maximum and minimum limits as well as movement thresholds
	*/
	function set_limits(){
		//max and min container movements
		var max_move = $main.offset().top + $main.height() - $container.height() - 2*parseInt($container.css("top") );
		var min_move = $main.offset().top;
		//save them
		$container.attr("data-min", min_move).attr("data-max",max_move);
		//window thresholds so the movement isn't called when its not needed!
		//you may wish to adjust the freshhold offset
		window_min = min_move - threshold_offset;
		window_max = max_move + $container.height() + threshold_offset;
	}
	//sets the limits for the first load
	set_limits();
	
	function window_scroll(){
		//if the window is within the threshold, begin movements
		if( $window.scrollTop() >= window_min && $window.scrollTop() < window_max ){
			//reset the limits (optional)
			set_limits();
			//move the container
			container_move();
		}
	}
	$window.bind("scroll", window_scroll);
	
	/**
	 * Handles moving the container if needed.
	**/
	function container_move(){
		var wst = $window.scrollTop();
		//if the window scroll is within the min and max (the container will be "sticky";
		if( wst >= $container.attr("data-min") && wst <= $container.attr("data-max") ){
			//work out the margin offset
			var margin_top = $window.scrollTop() - $container.attr("data-min");
			//margin it down!
			$container.css("margin-top", margin_top);
		//if the window scroll is below the minimum 
		}else if( wst <= $container.attr("data-min") ){
			//fix the container to the top.
			$container.css("margin-top",0);
		//if the window scroll is above the maximum 
		}else if( wst > $container.attr("data-max") ){
			//fix the container to the top
			$container.css("margin-top", $container.attr("data-max")-$container.attr("data-min")+"px" );
		}
	}
	//do one container move on load
	container_move();
});
            
          
!
999px
Loading ..................

Console