diff --git a/README.md b/README.md index df090b7..1bd0716 100644 --- a/README.md +++ b/README.md @@ -157,6 +157,12 @@ enters or leaves the viewport. For details, see [Children](#children), below. */ fireOnRapidScroll: PropTypes.bool, + /** + * fullView - if the waypoint is displayed on the screen fully, not partly. + * The onEneter/onLeave fire + */ + fullView: PropTypes.bool, + /** * Use this prop to get debug information in the console log. This slows * things down significantly, so it should only be used during development. diff --git a/index.d.ts b/index.d.ts index 857f15b..bf982bd 100644 --- a/index.d.ts +++ b/index.d.ts @@ -99,6 +99,12 @@ declare namespace Waypoint { */ fireOnRapidScroll?: boolean; + /** + * If the waypoint is displayed on the screen fully, not partly. + * The onEneter/onLeave fire + */ + fullView?: boolean; + /** * Use this prop to get debug information in the console log. This slows * things down significantly, so it should only be used during development. diff --git a/src/getCurrentPosition.js b/src/getCurrentPosition.js index aa2efc0..5c783e6 100644 --- a/src/getCurrentPosition.js +++ b/src/getCurrentPosition.js @@ -12,16 +12,25 @@ export default function getCurrentPosition(bounds) { return constants.invisible; } - // top is within the viewport - if (bounds.viewportTop <= bounds.waypointTop && - bounds.waypointTop <= bounds.viewportBottom) { - return constants.inside; - } + if (bounds.fullView) { + // top & bottom is within the viewport + if (bounds.viewportTop <= bounds.waypointTop && + bounds.waypointTop <= bounds.viewportBottom && + bounds.viewportTop <= bounds.waypointBottom && + bounds.waypointBottom <= bounds.viewportBottom) { + return constants.inside; + } + } else { + // top is within the viewport + if (bounds.viewportTop <= bounds.waypointTop && bounds.waypointTop <= bounds.viewportBottom) { + return constants.inside; + } - // bottom is within the viewport - if (bounds.viewportTop <= bounds.waypointBottom && - bounds.waypointBottom <= bounds.viewportBottom) { - return constants.inside; + // bottom is within the viewport + if (bounds.viewportTop <= bounds.waypointBottom && + bounds.waypointBottom <= bounds.viewportBottom) { + return constants.inside; + } } // top is above the viewport and bottom is below the viewport diff --git a/src/waypoint.jsx b/src/waypoint.jsx index 0146444..ff2995a 100644 --- a/src/waypoint.jsx +++ b/src/waypoint.jsx @@ -20,6 +20,7 @@ const defaultProps = { onLeave() { }, onPositionChange() { }, fireOnRapidScroll: true, + fullView: false, }; /** @@ -252,7 +253,7 @@ export default class Waypoint extends React.Component { debugLog('scrollableAncestor scrollTop', contextScrollTop); } - const { bottomOffset, topOffset } = this.props; + const { bottomOffset, topOffset, fullView } = this.props; const topOffsetPx = computeOffsetPixels(topOffset, contextHeight); const bottomOffsetPx = computeOffsetPixels(bottomOffset, contextHeight); const contextBottom = contextScrollTop + contextHeight; @@ -262,6 +263,7 @@ export default class Waypoint extends React.Component { waypointBottom, viewportTop: contextScrollTop + topOffsetPx, viewportBottom: contextBottom - bottomOffsetPx, + fullView }; } @@ -299,6 +301,7 @@ Waypoint.propTypes = { onLeave: PropTypes.func, onPositionChange: PropTypes.func, fireOnRapidScroll: PropTypes.bool, + fullView: PropTypes.bool, scrollableAncestor: PropTypes.any, horizontal: PropTypes.bool,