Merge pull request alvarotrigo#2420 from passion4code/offsetTop-option

alvarotrigo · web-flow · commit 59ec06a75b67 · 2016-12-19T15:36:53.000Z
Offset top option
diff --git a/README.md b/README.md
@@ -202,6 +202,7 @@ $(document).ready(function() {
 		responsiveWidth: 0,
 		responsiveHeight: 0,
 		responsiveSlides: false,
+		offsetTop: 0,
 
 		//Custom selectors
 		sectionSelector: '.section',
@@ -473,6 +474,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
@@ -167,6 +167,7 @@
             responsiveWidth: 0,
             responsiveHeight: 0,
             responsiveSlides: false,
+            offsetTop: 0,
 
             //Custom selectors
             sectionSelector: SECTION_DEFAULT_SEL,
@@ -191,7 +192,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;
@@ -437,7 +438,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);
@@ -537,6 +538,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();
@@ -648,7 +654,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 initializing it again
 
