Imagine a layout where each section is designed to be the size of the user's viewport or larger:
+----------+
| Section1 |
+----------+
| Section2 |
+----------+
| Section3 |
+----------+
All sections are visible within one view. As the user scrolls through the page, I want the browser URL to change dynamically based on which section is in view. For example, when the user first sees the page, the URL should be http://example.com/#/section1. Then as they scroll and reach Section 2, the URL should update to http://example.com/#/section2. Additionally, if a user copies a link like http://example.com/#/section2 and opens it later, the page should automatically scroll to that specific section.
To determine which section is currently in view, I am utilizing the angular-inview directive.
Currently, I am achieving this by using a parameter:
$state.go($state.current, {
section: $scope.activeSectionId // e.g. 'section2'
}, {
notify: false,
location: 'replace'
});
However, this method has its drawbacks. The URLs don't look very friendly, and there is a bug where clicking a link with ui-sref causes the page to jump and then adjust the inview section, triggering the code above. This misnavigates on the initial click but works correctly after a page reload.
If anyone has suggestions on how to improve this functionality, I would greatly appreciate it!