diff --git a/index.html b/index.html index 8a998cd..1f77f57 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Mapbox + Docbox diff --git a/src/components/app.js b/src/components/app.js index 5abbbc7..ba33e76 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -68,25 +68,40 @@ var App = React.createClass({ }, componentDidMount() { this.mediaQueryChanged(); + this.onScroll = debounce(this._onScroll, 100); + document.addEventListener('scroll', this.onScroll); + this._onScroll(); + }, + _onScroll() { + var sections = document.querySelectorAll('div.section'); + if (!sections.length) return; + for (var i = 0; i < sections.length; i++) { + var rect = sections[i].getBoundingClientRect(); + if (rect.bottom > 0) { + this.setState({ + activeSection: sections[i].title + }); + return; + } + } }, mediaQueryChanged() { - var queries = { - mobile: this.state.mqls.mobile.matches, - tablet: this.state.mqls.tablet.matches, - desktop: this.state.mqls.desktop.matches - }; - this.setState({ queries }); + this.setState({ + queries: { + mobile: this.state.mqls.mobile.matches, + tablet: this.state.mqls.tablet.matches, + desktop: this.state.mqls.desktop.matches + } + }); }, componentWillUnmount() { Object.keys(this.state.mqls).forEach(key => this.state.mqls[key].removeListener(this.mediaQueryChanged)); + document.body.removeEventListener('scroll', this.onScroll); }, onChangeLanguage(language) { this.setState({ language }); }, - onSpy(activeSection) { - this.setState({ activeSection }); - }, componentDidUpdate(_, prevState) { if (prevState.activeSection !== this.state.activeSection) { // when the section changes, replace the hash @@ -127,7 +142,6 @@ var App = React.createClass({ @@ -143,10 +157,10 @@ var App = React.createClass({ {/* Header */ }
- +
- {queries.desktop ? 'Example API Documentation' : - queries.mobile ? 'API Docs' : 'Example API Docs'} + {queries.desktop ? 'API Documentation' : + queries.mobile ? 'API Docs' : 'API Docs'}
{queries.tablet &&