0

I have a long one-pager with different sections, each within their own <article id="section-title">. I’d like to add navigation in the style of Netlify’s documentation (see example), which has the address bar change by appending the current section’s id as you scroll. I think it would be better if it returned to the original URL (without anchors) when scrolling to the top, before the first section. Though, I have no idea where to start or how to look for a plugin with this functionality.

How can I do all this with jQuery?

Infernoid Seitsemas
  • 55
  • 6
  • "address bar change by appending the current section’s id as you scroll" I can not think of any reasons to do this. Can you elaborate? Also read this about anchor links: https://riptutorial.com/html/example/1076/link-to-an-anchor – ikiK Sep 18 '20 at 22:28
  • @ikiK I have this long one-pager I’m talking about. So the user would see all the articles by scrolling within the same page. In case the user wants to share the current article they’re on, they would copy the URL, which would already have the anchor for that particular article. Look at the behavior in the example I gave (Netlify’s documentation). – Infernoid Seitsemas Sep 19 '20 at 23:29
  • @ikiK The page I’m working on is similar to [this one](http://nathanyoung.org). Look how everything is on the same page. – Infernoid Seitsemas Sep 19 '20 at 23:32

1 Answers1

0

The question is a bit to extensive and I'm surprised it wasn't closed, but as you are new here I will give you an head start, you had everything you need on this website:

You need to:

1- Find out if your article is in view-port and extract id. On this topic among others you have couple of different solutions on how to: Dynamically detect current div on page scroll in jQuery with random number of divs

2- You need to update the a address bar URL without reloading, you need to learn how to on next topics: Updating address bar with new URL without hash or reloading the page and How do I modify the URL without reloading the page?

I have made you basic example of how that works:

<html>

<body>
  <header>
    <style type="text/css">
      section {
        min-height: 300px
      }
    </style>
  </header>
  <section id="section1"> section 1</section>
  <section id="section2"> section 2</section>
  <section id="section3"> section 3</section>
  <section id="section4"> section 4</section>
  <script type="text/javascript">
    var isInViewport = function(elem) {
      var distance = elem.getBoundingClientRect();
      return (
        distance.top >= 0 &&
        distance.left >= 0 &&
        distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        distance.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    };

    var findMe = document.querySelectorAll('section');

    window.addEventListener('scroll', function(event) {
      // add event on scroll
      findMe.forEach(page => {
        //for each .page
        if (isInViewport(page)) {
          //if in Viewport
          console.clear();
          console.log(page.id);
          // exampla with hash #:
          //document.location.hash = page.id;

          //new url
          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + page.id;
          window.history.pushState({
            path: newurl
          }, '', newurl);
        }
      });
    }, false);
  </script>
</body>

</html>

This is more then enough for you to get going yourself. First search for topics here for answer, then feel free if you get stuck on some part of code to ask for help.

Welcome to SO and good luck.

ikiK
  • 6,328
  • 4
  • 20
  • 40