jQuery 101: Basic examples

Simple examples of selecting based on class and id of elements, binding a function to the click event, and changing css through jQuery.

HTML

<div class="header">
  Header should become fixed when scroll reach container
  <img src="http://cdn.lightgalleries.net/4bd5ec12b739d/images/Snow_Capped_Mountains_Banff_090031_08w-2.jpg" />
</div>
<div class="header-spacer"></div>
<div class="content-container">
  <p>Content here</p>
  <div class="dist" style="padding-top:100px"></div>
</div>

CSS

.header {
  overflow: hidden !important;
  width: 100%;
  height: 200px;
  font-size: 20px;
  color: #fff;
  z-index: 100;
  position: fixed;
}

.header img {
  position: absolute;
  bottom: 0px;
  left: 0;
}

.header-spacer {
  width: 100%;
  height: 200px;
  background: blue;
}

.content-container {
  height: 900px;
  width: 100%;
  padding: 30px;
  background: #ebe9ca;
}

JavaScript

var header  = $(".header"),
		headerH = header.outerHeight(),
		spacer  = $(".header-spacer");
$(window).scroll(function () {
		var $scrollTop     = $(window).scrollTop(),
		    $element 	     = $('.content-container').offset().top,
		    $distance      = ($element - $scrollTop),
        $newHeight  	 = 40,
        $oldHeight		 = 200;
    if ($scrollTop < $element - $newHeight) {
    		$(".dist").html("scroll position " + $distance);
    		header.height($distance);
    } 
});