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>
  <p style="padding-top:200px">Content here</p>
</div>

CSS

.header {
  overflow: hidden !important;
  width: 100%;
  height: 200px;
  z-index: 100;
  position: fixed;
}

.header img {
  position: absolute;
  top: -230px;
  left: 0;
}

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

.content-container {
  height: 900px;
  width: 100%;
  padding: 30px;
  background: #ebe9ca;
  position: relative;
  z-index:200;
}

JavaScript

var header  = $(".header");
$(window).scroll(function () {
		var $scrollTop     = $(window).scrollTop(),
		    $element 	     = $('.content-container').offset().top,
		    $distance      = ($element - $scrollTop),
        $newHeight  	 = 40,
        $oldHeight		 = 200;
    if ($scrollTop > $element - $newHeight) {
    		header.height($newHeight).css("z-index", 1000);
    } 
    else {
			header.css("z-index", 100).height($oldHeight);
		}
});