CODEWITHSUNDEEP
javascript
user6792790
user6792790

Reputation: 688

How do I add a condition for being on a specific section of website with javascript?

So, I would like to trigger a function when I reach this portion of the website:

<div id="firstRow">
    <a id="about" class="smooth"></a>
        <div class="intro">
            <div>Scroll down to know more about us</div>
        </div>

</div>

So, I did something like:

var aboutSection = document.getElementById("firstRow");

function fixIfScrolled() {

    if ((aboutSection.offsetTop + aboutSection.offsetHeight) >= window.scrollY || window.scrollY <= aboutSection.offsetTop) {
        trigger event
    } else {
        trigger event
    }
}

window.onscroll = function() { fixIfScrolled() };

But this doesn't do the right think.

I would like to change a style of a particular item when I am inside that section (pretty much like changing the color of the menu text that corresponds to the section ex) https://blackrockdigital.github.io/startbootstrap-freelancer/)

Most importantly I want to do this without any javascrip library.

Please help!

Upvotes: 1

Views: 69

Answers (2)

nem035
nem035

Reputation: 35491

You must accumulate the vertical offset of your element by summing up the offsetTop values up the DOM tree, starting from your element.

Then you can compare the current scrollY position of the window to the element's vertical offset and, if they are equal, you've reached your element.

// accumulate offsetTop value up the DOM tree
const offsetY = elem => {
  let top = 0;
  while (elem) {
    top += elem.offsetTop || 0;
    elem = elem.offsetParent;
  }
  return top;
};

const div = document.querySelector('#div');
const divOffset = offsetY(div);

// we must compare the offset within a certain range
// in case the user scrolls too fast
const withinRange = (a, b, epsilon = 5) => b - a <= epsilon;

window.addEventListener('scroll', () => {
  if (withinRange(window.scrollY, divOffset)) {
    div.style.backgroundColor = 'green';
  }
});
#div {
  background-color: blue;
  height: 100px;
  width: 100%;
}
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div id="div"></div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>

Upvotes: 1

Znaneswar
Znaneswar

Reputation: 3387

Try like this

$(document).on('scroll', function() {
    if($(this).scrollTop() >= $('#firstRow').position().top){
        yourfunction();
    }
})

Upvotes: 0

Related Questions