CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
ToddAndChips
ToddAndChips

Reputation: 13

How can I use JavaScript to detect how far a div has been scrolled by without the window moving?

I had a working JavaScript function that detected what point of a page I had scrolled to, and the navbar responded to this by changing the colour of the word that matches the section I was on.

Since then, I've added some parallax backgrounds, which meant encasing all the site contents inside of a <div> to create the parallax effect (excluding the navbar itself). To remove the double scrollbar on the right, I set the html and body tags to overflow: hidden, which worked great for parallax.

However, my navbar is no longer displaying the position on the page.

It took me a long time to theorise why it stopped working (I've only been learning html, css, and a bit of JS for a week, so I'm a little slow). Presumably, because my content (including anchor points to tell the nav bar when to change colours) is all wrapped inside of a scrolling <div>, using the $(window) part in the JS function is useless, as technically the window is static and the <div> contents are scrolling.

So my question is as follows: Is there a way the JS function can monitor when an anchor, for example, passes the top of the <div> it is contained in?

As an afterthought, because I'm new to all this coding and it's still a little overwhelming, would it be more practical to adjust my method of parallax so I don't have to contain the site contents within a <div>?

This is the JavaScript I'm using with the $(window) part that I suspect is causing the issue:

$(window).on('scroll', function() {
    $('.hiddenanchor').each(function() {
        if($(window).scrollTop() >= $(this).offset().top 
        && !$('li a').hasClass("clicked")) {
            var id = $(this).attr('id');
            $('#navheader li a').removeClass('active');
            $('#navheader li a[id="link'+ id +'"]').addClass('active');
        }
    })
});

The .hiddenanchor is the tag that specifies what part of the website is a new section. So when that part was at the top of the window, the JS function would add class="active" to the matching navbar text.

I'm completely new to StackOverflow so I don't want to overpost - hopefully that's enough information to go with for now, but if anybody willing to help needs some more information, I am more than happy to give whatever is required.

Thanks to anybody who may be able to help me, and please bear in mind I am only a week old code newbie, so do go easy on me!

Edit: Adding some html for context.

<html>
    <head>
    </head>

    <header>
        <nav>
            <ul>
                <div>
                    <li><a href="#01">Navlink 1</a></li>
                    <li><a href="#02">Navlink 2</a></li>
                    <li><a href="#03">Navlink 3</a></li>
                </div>
            </ul>
        </nav>
    </header>

    <body>
        <main class="wrapper">
            <section class="content">
                <div class="main-div-column">

                    <a class="anchor" id="01">
                    </a>

                    <div class="main-div section-1">
                        Lots of text <br>
                        Lots of text <br>
                        Lots of text <br>
                        Lots of text <br>
                        Lots of text <br>
                        Lots of text <br>
                        Lots of text <br>
                        Lots of text <br>
                    </div>

                    <a class="anchor" id="02">
                        </a>

                    <div class="main-div section-2">
                        Lots more text <br>
                        Lots more text <br>
                        Lots more text <br>
                        Lots more text <br>
                        Lots more text <br>
                        Lots more text <br>
                        Lots more text <br>
                        Lots more text <br>
                    </div>

                    <a class="anchor" id="03">
                    </a>

                    <div class="main-div section-3">
                        Some more text <br>
                        Some more text <br>
                        Some more text <br>
                        Some more text <br>
                        Some more text <br>
                        Some more text <br>
                        Some more text <br>
                        Some more text <br>
                    </div>
                </div>
            </section>
        </main>
    </body>
</html>

That's the general layout of the site - the <a class="anchor" id="number"> is what I used in the JavaScript. So when that anchor was at the top of the screen, it would add class="active" to the matching navlink.

Upvotes: 1

Views: 434

Answers (1)

asmanp2012
asmanp2012

Reputation: 372

You have to change $(window) to the scrolling $('div') for example this sample shows how much div.ex1 scrolled

document.querySelector('.ex1').scrollTop

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  background-color: lightblue;
  width: 110px;
  height: 110px;
  overflow: scroll;
  }
</style>
</head>
<body>
<script>
	function myFunction(){
        document.querySelector('h2 strong').innerHTML = document.querySelector('.ex1').scrollTop;
    }
</script>
<h2>count: <strong></strong></h2>
<div class="ex1" onscroll="myFunction()">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>

Upvotes: 2

Related Questions