How can I do a spy spy without bootstrap?

Question

How can I do a spy spy without bootstrap?

Navigation

#1 by (4 votes)

0

  <html>
    <div id="navbar">
        <div  class="ui secondary inverted pointing top fixed menu">
            <div class="ui container">
                <a id="brand-item" class="item" href="index.html">
                    <img class="ui image" src="assets/img/logo.png">
                </a>
                <div id="right-menu" class="right menu " >
                    <a class="item" href="#about">¿Cómo funciona?</a>
                    <a class="item" href="#register">Registrarme</a>
                    <a class="item" href="#blog">Blog</a>
                    <a class="item" href="timeline.html">Trayectoria</a>
                </div>
                 <div  class="mobile-navbar-toggler ">
                    <i style="color: white; font-size: 25px" class="fa fa bars"></i>
                </div>
            </div>
        </div>
    </div>
  <section id="about"></section>

   <section id="register"></section>

     <section id="blog"></section>
 </html>

javascript html5 html css3 css

asked by Edgar Pimienta 26.06.2018 в 02:30

source

1 answer

Notice: Undefined offset: 0 in C: \ xampp \ htdocs \ www \ SERVICESUNARP \ index.php on line 57 I get [Error] expected unqualified-id before '\ x72677629' [closed]

score 4 · Accepted Answer

What you want to do is known as scroll spy . You have two options:

Use a library that does this for you:

link

or do it manually using javascript. In this case you should use an event as follows

 window.addEventListener('scroll', function () {
   let heightTotal = document.body.scrollHeight;
   if (window.pageYOffset >= heightTotal) {
     let item = document.querySelector('.item1');
     item.classList.contains('someClass');
     item.classList.add('newClass');
     item.classList.remove('otherClass');
   }
 })