[Vuejs]-How to determine which part of the page I'm on in order to reflect that on my navigation bar?

by

0👍

We tried name to navigate in the page between sections is coming from emacs

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
        color: rgba(0, 0, 0, 0.8);
    }
    body {
        background-color: #f1f1f1;
        font-family: 'Roboto', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
        background-image: url("./assets/svg/topography.svg");
        background-attachment: fixed;
    }
    section {
        min-height: 100vh;
    }
    .navigation {
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        text-align: right;
    }
    .navigation div {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-bottom: 30px;
        transition: all .1s linear;
        border: 5px solid rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
    .navigation div:hover {
        transform: scale(1.2)
    }
    .one {
    background-color: red;
    }
    .two {
    background-color: blue;
    }
    .three {
    background-color: green;
    }
<nav class='navigation'>
    <div></div>
    <div></div>
    <div></div>
</nav>
<section class='one'></section>
<a name='one'></a>
<section class='two'></section>
<section class='three'></section>
<a href='#one'> go to section one </a>

0👍

I believe what you are looking for is the pageYOffset property. As shown here and here

var horizontalScroll = window.pageYOffset;

0👍

This code might be a better approach than reading the “traditional” approach of reading element position and height then subtracting that from scroll position.

let totalSections = document.querySelectorAll("section").length;
let sectionHeight = document.querySelector("section").clientHeight;
let totalHeight = totalSections * sectionHeight;

// Change this to 0 if you dont want a threshold. 
let threshold = sectionHeight / 2;

window.addEventListener('scroll', function(e) {
	
  let scrollPosition = window.scrollY + threshold;
	
	// Deduct the scroll position from the total height then divide by section height.
  let position = (totalHeight - scrollPosition) / sectionHeight;
	
	// reverse position
	let final = totalSections - position;
	
	// get section number only
	let sectionNumber = Math.trunc(final);
	
	// get percentage
	let positionPercentage = final - sectionNumber;
	console.log("section", sectionNumber, "percentage", Math.trunc(positionPercentage * 100));
});
*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.8);
}

body {
  background-color: #f1f1f1;
  font-family: 'Roboto', 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
  background-image: url("./assets/svg/topography.svg");
  background-attachment: fixed;
}

section {
  min-height: 100vh;
}

.navigation {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.navigation div {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-bottom: 30px;
  transition: all .1s linear;
  border: 5px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.navigation div:hover {
  transform: scale(1.2)
}

.one {
  background-color: #2ecc71;
}

.two {
  background-color: #9b59b6;
}

.three {
  background-color: #34495e;
}
<nav class='navigation'>
  <div></div>
  <div></div>
  <div></div>
</nav>
<section class='one'></section>
<section class='two'></section>
<section class='three'></section>

Leave a comment