diff --git a/example/index.html b/example/index.html index 53d71f4..d43d6b5 100755 --- a/example/index.html +++ b/example/index.html @@ -24,6 +24,7 @@
+
@@ -33,6 +34,7 @@
+
diff --git a/src/css/jquery.scrollSections.css b/src/css/jquery.scrollSections.css index 2369b98..17b8607 100644 --- a/src/css/jquery.scrollSections.css +++ b/src/css/jquery.scrollSections.css @@ -10,7 +10,13 @@ body { display: block; position: relative; width: 100%; - height: 100%; + height: auto; + min-height: 100%; +} +.filler { + position: relative; + width: 100%; + height: 2000px; } #scrollsections-navigation { position: fixed; diff --git a/src/js/jquery.scrollSections.js b/src/js/jquery.scrollSections.js index 7000611..9813392 100644 --- a/src/js/jquery.scrollSections.js +++ b/src/js/jquery.scrollSections.js @@ -43,6 +43,8 @@ animateScrollToFirstSection: false, // Create navigation? If the option navigation is set to false, this will have no effect! createNavigation: true, + // Be able to scroll within the sections? If sections aren't larger than 100% of the wrapper, this will have no effect! + inSectionScroll: true, // The animation speed. speed: 500, // Throw execption if something goes wrong. @@ -89,6 +91,7 @@ this._isAnimated = false; this._wheelDelay = null; this._scrollPaused = false; + this._scrollDiff = 114; this._$nav = null; this._ltIE9 = false; @@ -233,7 +236,7 @@ } } } - if (nextStep > -1) { + if (self._currentStep != nextStep && nextStep > -1) { self.customScrollTo(nextStep); } }); @@ -348,12 +351,17 @@ var speed; if (index != null && index >= 0 && index < this._sections) { - this._currentStep = index; this._$previousSection = this._$currentSection; this._$currentSection = this._$sections[index]; - yTo = this._$currentSection.offset().top; + if (index < self._currentStep) { + yTo = this._$currentSection.offset().top + this._$currentSection.height() - self._$htmlBody.outerHeight(); + } + else { + yTo = this._$currentSection.offset().top; + } + this._currentStep = index; speed = noAnimation ? 0 : this.options.speed; // Mark any link on the page that refers to our active section active. @@ -421,11 +429,10 @@ } this._$window.mousewheel(function (event, delta, deltaX, deltaY) { + var scrollTop = self._$htmlBody.scrollTop() || self._$window.scrollTop(); var stepDiff = null; var nextStep = -1; - event.preventDefault(); - // Only scroll if we are not animating and scrolling is not paused. if (!(self._isAnimated && self._scrollPaused)) { @@ -434,31 +441,46 @@ // Scroll Down if (deltaY < 0) { - // Only allow the user to scroll down the maximum sections as defined in our options. - if (deltaY < -self.options.scrollMax) { - deltaY = -self.options.scrollMax; - } + if (self._currentStep + 1 < self._sections) { - if ((!nextStep || !stepDiff || deltaY < stepDiff) && ((self._currentStep - deltaY) < self._sections)) { - stepDiff = deltaY; - nextStep = self._currentStep - stepDiff; + // Only allow the user to scroll down the maximum sections as defined in our options. + if (deltaY < -self.options.scrollMax) { + deltaY = -self.options.scrollMax; + } + + if (self.options.inSectionScroll && (scrollTop + self._$htmlBody.outerHeight() - (deltaY * self._scrollDiff) > self._$sections[self._currentStep + 1].offset().top)) { + nextStep = self._currentStep + 1; + stepDiff = true; + } else if (!self.options.inSectionScroll && ((!nextStep || !stepDiff || deltaY < stepDiff) && ((self._currentStep - deltaY) < self._sections))) { + stepDiff = deltaY; + nextStep = self._currentStep - stepDiff; + } } } // Scroll Up else { - // Only allow the user to scroll up the maximum sections as defined in our options. - if (deltaY > self.options.scrollMax) { - deltaY = self.options.scrollMax; - } + if (self._currentStep > 0) { + + // Only allow the user to scroll up the maximum sections as defined in our options. + if (deltaY > self.options.scrollMax) { + deltaY = self.options.scrollMax; + } - if ((!nextStep || !stepDiff || deltaY > stepDiff) && ((self._currentStep - deltaY) > -1)) { - stepDiff = deltaY; - nextStep = self._currentStep - stepDiff; + if (self.options.inSectionScroll && (scrollTop - (deltaY * self._scrollDiff) < self._$sections[self._currentStep].offset().top)) { + nextStep = self._currentStep - 1; + stepDiff = true; + } else if (!self.options.inSectionScroll && ((!nextStep || !stepDiff || deltaY > stepDiff) && ((self._currentStep - deltaY) > -1))) { + stepDiff = deltaY; + nextStep = self._currentStep - stepDiff; + } } } if (stepDiff && nextStep > -1) { + + event.preventDefault(); + if (self._wheelDelay) { clearTimeout(self._wheelDelay); } @@ -470,10 +492,10 @@ } else { self.mousewheelScrollTo(nextStep); } + + return false; } } - - return false; }); return this;