simple option for offsetTop

passion4code · passion4code · commit 9f4913fbc3ee · 2016-11-18T10:58:47.000-08:00
diff --git a/README.md b/README.md
@@ -191,6 +191,7 @@ $(document).ready(function() {
 		responsiveWidth: 0,
 		responsiveHeight: 0,
 		responsiveSlides: false,
+		offsetTop: 0,
 
 		//Custom selectors
 		sectionSelector: '.section',
@@ -448,6 +449,8 @@ In order to prevent fullpage.js from creating the scrollbar in certain sections
 
 - `responsiveSlides`: (default `false`) [Extension of fullpage.js](http://alvarotrigo.com/fullPage/extensions/). When set to `true` slides will be turned into vertical sections when responsive mode is fired. (by using the `responsiveWidth` or `responsiveHeight` options detailed above). Requires fullpage.js >= 2.8.5.
 
+- `offsetTop`: (default `0`). When set to a numeric value, this defines a top offset for the container height. This is particularly useful if you have a fixed header navigation that follows your scroll and you do not want the header navigation to cut off content in your sections.
+
 - `lazyLoading`: (default `true`) Lazy loading is active by default which means it will lazy load any media element containing the attribute `data-src` as detailed in the [Lazy Loading docs](https://github.com/alvarotrigo/fullPage.js#lazy-loading) . If you want to use any other lazy loading library you can disable this fullpage.js feature.
 
 ## Methods
diff --git a/jquery.fullPage.js b/jquery.fullPage.js
@@ -1,5 +1,5 @@
 /*!
- * fullPage 2.8.8
+ * fullPage 2.8.9
  * https://github.com/alvarotrigo/fullPage.js
  * @license MIT licensed
  *
@@ -165,6 +165,7 @@
             responsiveWidth: 0,
             responsiveHeight: 0,
             responsiveSlides: false,
+            offsetTop: 0,
 
             //Custom selectors
             sectionSelector: SECTION_DEFAULT_SEL,
@@ -189,7 +190,7 @@
         var isTouchDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|playbook|silk|BlackBerry|BB10|Windows Phone|Tizen|Bada|webOS|IEMobile|Opera Mini)/);
         var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
         var container = $(this);
-        var windowsHeight = $window.height();
+        var windowsHeight = $window.height() - options.offsetTop;
         var isResizing = false;
         var isWindowFocused = true;
         var lastScrolledDestiny;
@@ -432,7 +433,7 @@
 
             isResizing = true;
 
-            windowsHeight = $window.height();  //updating global var
+            windowsHeight = $window.height() - options.offsetTop;  //updating global var
 
             $(SECTION_SEL).each(function(){
                 var slidesWrap = $(this).find(SLIDES_WRAPPER_SEL);
@@ -551,6 +552,11 @@
                 options.css3 = support3d();
             }
 
+            if (options.offsetTop) {
+                container.css("top", options.offsetTop);
+                container.height(container.height() - options.offsetTop);
+            }
+            
             options.scrollBar = options.scrollBar || options.hybrid;
 
             setOptionsFromDOM();
@@ -662,7 +668,7 @@
             $('html').addClass(ENABLED);
 
             //due to https://github.com/alvarotrigo/fullPage.js/issues/1502
-            windowsHeight = $window.height();
+            windowsHeight = $window.height() - options.offsetTop;
 
             container.removeClass(DESTROYED); //in case it was destroyed before initilizing it again
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fullpage.js",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Create  beautiful fullscreen scrolling websites",
   "main": "dist/jquery.fullpage.js",
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "fullpage.js",`
`3`		`- "version": "2.8.8",`
	`3`	`+ "version": "2.8.9",`
`4`	`4`	`"description": "Create beautiful fullscreen scrolling websites",`
`5`	`5`	`"main": "dist/jquery.fullpage.js",`
`6`	`6`	`"scripts": {`