juanbrujo/example.html

## example.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>transformFixedNav()</title>
</head>
<body>

  <header>header</header>

  <div class="content">
    .content 1
  </div>
  <div class="content">
    .content 2
  </div>
  <div class="content">
    .content 3
  </div>

</body>
</html>

## example.less
header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: pink;
  z-index: 99;
  -webkit-transition: .3s;
  transition: .3s;

  &.breakpoint {
    height: 50px;
    font-size: 10px;
  }
}
.content {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: gray;
  border-bottom: 5px solid red;
}

## jquery.transformFixedNav.js
/**
 * transformFixedNav: Add a class to a <header> if it reaches certain value while scrolling
 * demo: http://codepen.io/juanbrujo/full/ltEmA/
 * gist: https://gist.github.com/juanbrujo/b1192a85c3f2932544fc/
**/

// INIT: transformFixedNav()
var transformFixedNav = function(elemSticky,elemBreakpoint){
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    if(scrollTop >= elemBreakpoint) {
      elemSticky.addClass('breakpoint');
    } else {
      elemSticky.removeClass('breakpoint');
    }
  });
};
// END: transformFixedNav()

// USE: define elements
var elemSticky = $('header'),
    elemBreakpoint = $(window).height();

// SET: window height to all .content elements,
// same as breakpoint value
$('.content').height(elemBreakpoint);

// APPLY
transformFixedNav(elemSticky,elemBreakpoint);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<meta charset="utf-8">
	<title>transformFixedNav()</title>
	</head>
	<body>

	<header>header</header>

	<div class="content">
	.content 1
	</div>
	<div class="content">
	.content 2
	</div>
	<div class="content">
	.content 3
	</div>

	</body>
	</html>
	header {
	position: fixed;
	width: 100%;
	height: 100px;
	background-color: pink;
	z-index: 99;
	-webkit-transition: .3s;
	transition: .3s;

	&.breakpoint {
	height: 50px;
	font-size: 10px;
	}
	}
	.content {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: gray;
	border-bottom: 5px solid red;
	}
	/**
	* transformFixedNav: Add a class to a <header> if it reaches certain value while scrolling
	* demo: http://codepen.io/juanbrujo/full/ltEmA/
	* gist: https://gist.github.com/juanbrujo/b1192a85c3f2932544fc/
	**/

	// INIT: transformFixedNav()
	var transformFixedNav = function(elemSticky,elemBreakpoint){
	$(window).scroll(function() {
	var scrollTop = $(window).scrollTop();
	if(scrollTop >= elemBreakpoint) {
	elemSticky.addClass('breakpoint');
	} else {
	elemSticky.removeClass('breakpoint');
	}
	});
	};
	// END: transformFixedNav()

	// USE: define elements
	var elemSticky = $('header'),
	elemBreakpoint = $(window).height();

	// SET: window height to all .content elements,
	// same as breakpoint value
	$('.content').height(elemBreakpoint);

	// APPLY
	transformFixedNav(elemSticky,elemBreakpoint);