First Code Commit

example/js/stickUp.js

@@ -0,0 +1,122 @@
+jQuery(
+function($) {
+
+	$(document).ready(function(){
+		var contentButton = [];
+		var contentTop = [];
+		var content = [];
+		var lastScrollTop = 0;
+		var scrollDir = '';
+		var itemClass = '';
+		var itemHover = '';
+		var menuSize = null;
+		var stickyHeight = 0;
+		var stickyMarginB = 0;
+		var currentMarginT = 0;
+		var topMargin = 0;
+		$(window).scroll(function(event){
+   			var st = $(this).scrollTop();
+   			if (st > lastScrollTop){
+       			scrollDir = 'down';
+   			} else {
+      			scrollDir = 'up';
+   			}
+  			lastScrollTop = st;
+		});
+		$.fn.stickUp = function( options ) {
+			// adding a class to users div
+			$(this).addClass('stuckMenu');
+        	//getting options
+        	var objn = 0;
+        	if(options != null) {
+	        	for(var o in options.parts) {
+	        		if (options.parts.hasOwnProperty(o)){
+	        			content[objn] = options.parts[objn];
+	        			objn++;
+	        		}
+	        	}
+	  			if(objn == 0) {
+	  				console.log('error:needs arguments');
+	  			}
+
+	  			itemClass = options.itemClass;
+	  			itemHover = options.itemHover;
+	  			if(options.topMargin != null) {
+	  				if(options.topMargin == 'auto') {
+	  					topMargin = parseInt($('.stuckMenu').css('margin-top'));
+	  				} else {
+	  					if(isNaN(options.topMargin) && options.topMargin.search("px") > 0){
+	  						topMargin = parseInt(options.topMargin.replace("px",""));
+	  					} else if(!isNaN(parseInt(options.topMargin))) {
+	  						topMargin = parseInt(options.topMargin);
+	  					} else {
+	  						console.log("incorrect argument, ignored.");
+	  						topMargin = 0;
+	  					}	
+	  				}
+	  			} else {
+	  				topMargin = 0;
+	  			}
+	  			menuSize = $('.'+itemClass).size();
+  			}			
+			stickyHeight = parseInt($(this).height());
+			stickyMarginB = parseInt($(this).css('margin-bottom'));
+			currentMarginT = parseInt($(this).next().closest('div').css('margin-top'));
+			vartop = parseInt($(this).offset().top);
+			//$(this).find('*').removeClass(itemHover);
+		}
+		$(document).on('scroll', function() {
+			varscroll = parseInt($(document).scrollTop());
+			if(menuSize != null){
+				for(var i=0;i < menuSize;i++)
+				{
+					contentTop[i] = $('#'+content[i]+'').offset().top;
+					function bottomView(i) {
+						contentView = $('#'+content[i]+'').height()*.4;
+						testView = contentTop[i] - contentView;
+						//console.log(varscroll);
+						if(varscroll > testView){
+							$('.'+itemClass).removeClass(itemHover);
+							$('.'+itemClass+':eq('+i+')').addClass(itemHover);
+						} else if(varscroll < 50){
+							$('.'+itemClass).removeClass(itemHover);
+							$('.'+itemClass+':eq(0)').addClass(itemHover);
+						}
+					}
+					if(scrollDir == 'down' && varscroll > contentTop[i]-50 && varscroll < contentTop[i]+50) {
+						$('.'+itemClass).removeClass(itemHover);
+						$('.'+itemClass+':eq('+i+')').addClass(itemHover);
+					}
+					if(scrollDir == 'up') {
+						bottomView(i);
+					}
+				}
+			}
+
+
+
+			if(vartop < varscroll + topMargin){
+				$('.stuckMenu').addClass('isStuck');
+				$('.stuckMenu').next().closest('div').css({
+					'margin-top': stickyHeight + stickyMarginB + currentMarginT + 'px'
+				}, 10);
+				$('.stuckMenu').css("position","fixed");
+				$('.isStuck').css({
+					top: '0px'
+				}, 10, function(){
+
+				});
+			};
+
+			if(varscroll + topMargin < vartop){
+				$('.stuckMenu').removeClass('isStuck');
+				$('.stuckMenu').next().closest('div').css({
+					'margin-top': currentMarginT + 'px'
+				}, 10);
+				$('.stuckMenu').css("position","relative");
+			};
+
+		});
+	});
+
+});

example/stickup.css

@@ -0,0 +1,172 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+.code { counter-reset: listing; }
+xmp { counter-increment: listing; }
+.code xmp:before { content: counter(listing) ". "; color: gray; }
+
+body {
+  padding-bottom: 40px;
+  color: #5a5a5a;
+}
+
+#features {
+  max-width:none;
+}
+
+.row.featurette {
+  padding: 0 80px;
+  margin-right:0px;
+  margin-left:0px;
+}
+
+.row.featurette:nth-child(even){
+  background:#e6f1fa;
+  padding-bottom:50px;
+}
+
+.isStuck{
+    left:0px;
+    width:100%;
+}
+/* CUSTOMIZE THE NAVBAR
+-------------------------------------------------- */
+
+/* Special class on .container surrounding .navbar, used for positioning it into place. */
+.navbar-wrapper {
+  margin-top:20px;
+  position: relative;
+  z-index: 15;
+
+}
+
+.navbar.navbar-inverse.navbar-static-top {
+  background: #5cb85c;
+  border-color: #398439;
+}
+.navbar.navbar-inverse.navbar-static-top a{
+  color:#fff;
+}
+.navbar.navbar-inverse.navbar-static-top a:hover{
+  color:#0A64A4;
+}
+.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus{
+  background:#398439;
+  font-weight:700;
+}
+.navbar-inverse .navbar-nav>.active>a:hover {
+  background:#398439;
+  color:#fff;
+  font-weight:700;
+}
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  /*
+  margin-bottom: 60px;
+
+  margin-top: -90px;
+
+  Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel .item {
+  height: 450px;
+  background-color: #0A64A4;
+}
+.carousel-inner > .item > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+}
+
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Pad the edges of the mobile views a bit */
+.marketing {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.marketing h2 {
+  font-weight: normal;
+}
+.marketing .col-lg-4 p {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 80px 0; /* Space out the Bootstrap <hr> more */
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+
+  /* Remove the edge padding needed for mobile */
+  .marketing {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Navbar positioning foo */
+  .navbar-wrapper {
+
+  }
+  /* The navbar becomes detached from the top, so we round the corners */
+  .navbar-wrapper .navbar {
+    border-radius: 4px;
+  }
+
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+  .featurette-heading {
+    font-size: 50px;
+  }
+
+}
+
+@media (min-width: 992px) {
+  .featurette-heading {
+    margin-top: 120px;
+  }
+}