2

Lo que quiero es que el elemento haga scroll hasta cierto punto del scroll porque al llegar al footer este pasa por encima. E conseguido algo con JQuery de cambiar el position a relative a cierta altura del scroll. Esto se complica más cuando quiero que le vuelva el position sticky si el scroll es inferior a lo que yo le pongo.

Código:

/* -------------------------------------NAV & BANNER------------------------ */
#logo{
  height: 60px;
  width: 60px;
}
.nav-color{
  transition: 0.5s;
  background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
  transition: 0.5s;
}
.banner{
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  border-bottom: 1px solid #ff8000;
}
.title {
  background-color: rgba(0,0,0, 0.3);
  width: 50vw;
  border-radius: 25px;
}
.shadow{
  background-color: #ffffff;
  opacity: 25%;

}
#large-text{
  font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  border-bottom: 1px solid #ff8000;
}
.blank{
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
  background: #ffffff;
  width: 81vw;
  border-bottom: 1px solid #ff8000;
}
.map{
  border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  width: 81vw;
  height: 100vh;
  border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
  background-image: url('');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  width: 81vw;
  height: 100vh;
}
.btn-lg{
  width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
  /* position: -webkit-sticky; */
  position: sticky;
  top: 2rem;
  height: 10vh;
  border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
  border-top: 1px solid #ff8000;
  width: 100vw;
  height: 60vh;
  background-color: #acb7ba;
  font-size: 12px;
}
#icon{
  font-size: 25px;
}
#youtube{
  height: 200px;
  weight: 200px;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="style/normalize.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style/style.css">
    <title>test</title>
  </head>
  <body>
    <!-- Nav Boostrap -->
    <section class="position-absolute">
      <ul class="nav nav-fill fixed-top nav-null-color" id="menu">
        <li class="nav-item">
          <a class="nav-link text-white underline" href="#">Corporate</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white underline" href="#">Used Machinery</a>
        </li>
        <li class="nav-item">
          <a href="#"> <img src="" id="logo" alt="logo"> </a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white underline" href="#">Services</a>
        </li>
        <!-- <li class="nav-item">
          <a class="nav-link text-white" href="#">Customer Area</a>
        </li> -->
        <li class="nav-item">
          <a class="nav-link text-white underline" href="#">Sign In/Register</a>
        </li>
      </ul>
    </section>
    
    
    <!-- About Us -->
    <section id="about" class="corporate text-center">
      <div class="screen-center">
        <h1 class="text-dark">About us</h1>
        <div class="row justify-content-center">
          <div class="col-6 blank">
            <h3>gsfgdfgdfgdg</h3>
            <p>fsdfgsdgdsfgsdfgsdfg</p>
          </div>
        </div>
      </div>
    </section>
    <div class="row">
      <div class="col-2 scroll-spy" id="">
        <div class="d-flex flex-column ml-5 mt-5 spy-menu">
          <h4>Corporate</h4>
          <a class="nav-link text-dark underline" href="#top"> About Us</a>
          <a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
          <a class="nav-link text-dark underline" href="#careers">Careers Title</a>
          <a class="nav-link text-dark underline" href="#contact">Contact Us</a>
        </div>
        <input type="text" id="prueba" value="">
        <input type="text" id="prueba2" value="">
      </div>
      <div class="col-10">
        <!-- Worlwide -->
        <section id="worldwide" class="worldwide text-center">
          <h1 class="mt-5 mb-5">Worldwide</h1>
          <div class="container">
            <div class="row justify-content-between">
              <div class="col ml-5">
                <ul class="list-group">
                  <li class="list-group-item active">dfgdfgdfgdfg</li>
                  <li class="list-group-item">dfgdfgdfg</li>
                  <li class="list-group-item">dfdfdgd</li>
                  <li class="list-group-item">dfgdf</li>
                  <li class="list-group-item">e-mail: jdfgdfgdfg</li>
                  <li class="list-group-item">Tel :dfgdfgdg‹</li>
                </ul>
              </div>
              <div class="col">
                <ul class="list-group">
                  <li class="list-group-item active">dfgdfgd</li>
                  <li class="list-group-item">Cdfgdfg</li>
                  <li class="list-group-item">2dfgdfgn</li>
                  <li class="list-group-item">dfgdfga</li>
                  <li class="list-group-item">SdfgdfgN</li>
                  <li class="list-group-item">e-mail: dfgdfgdfg</li>
                  <li class="list-group-item">dfgdgdfg</li>
                </ul>
              </div>
              <div class="col">
                <ul class="list-group">
                  <li class="list-group-item active">OdfgdfgK</li>
                  <li class="list-group-item">fgdfgdg
                  <li class="list-group-item">email: gffhfgfgh</li>
                  <li class="list-group-item">Tel: +fhghfg9</li>
                </ul>
              </div>
              <div class="col">
                <ul class="list-group">
                  <li class="list-group-item active">Ogfghfhhu </li>
                  <li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
                  <li class="list-group-item">rdgrgg</li>
                  <li class="list-group-item">email: rdgdrgds</li>
                  <li class="list-group-item">Tel.: drgdgrgdrg</li>
                </ul>
              </div>
            </div>
            
          </div>
        </section>
        <!-- Careers Title -->
        <section id="careers" class="careers">
          <div class="screen-center">
            <h1 class="text-dark">Careers Title</h1>
            <div class="row justify-content-center">
              <div class="col-6 blank">
                <p>drgdrgdrgdrgdrgdg</p>
              </div>
            </div>
          </div>
        </section>
        <!-- Contact Us -->
        <section id="contact" class="contact">
          <div class="screen-center">
            <h1 class="text-dark">Contact Us</h1>
            <div class="container">
              <div class="row justify-content-center blank">
                <div class="col-4">
                  <form>
                    <div class="form-group">
                      <input type="text" class="form-control mt-3" placeholder="Name">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Lastname">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Company">
                    </div>
                    <div class="form-group">
                      <select class="form-control" id="exampleFormControlSelect1">
                        <option>Albania</option>
                        <option>Angola</option>
                        <option>Argelia</option>
                        <option>Argentina</option>
                        <option>Armenia</option>
                      </select>
                    </div>
                    <div class="form-group">
                      <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Telephone">
                    </div>
                    <div class="form-group">
                      <input type="text" class="form-control" placeholder="Mobile">
                    </div>
                  </form>
                </div>
                <div class="col-4">
                  <form>
                    <div class="form-group">
                      <textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
                    </div>
                    <button type="button" class="btn btn-outline-warning btn-lg">Send</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>    
    
    <!-- Footer -->
    <section class="footer">
      <div class="container mt-3 mb-3">
        <div class="row">
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
              <h4 class="ml-3">Company</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link text-dark underline" href="#">About Us</a>
                <a class="nav-link text-dark underline" href="#">Offices</a>
                <a class="nav-link text-dark underline" href="#">News Media</a>
                <a class="nav-link text-dark underline" href="#">Contact</a>
              </li>
            </ul>
          </div>
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-cogs" aria-hidden="true"></i></span>
              <h4 class="ml-3">drgdrgdy</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link text-dark underline" href="#">drgdgdgy</a>
                <a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
                <a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
              </li>
            </ul>
          </div>
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-phone" aria-hidden="true"></i></span>
              <h4 class="ml-3">Contact</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <select class="form-control form-control-sm">
                  <option>Worldwide Contact</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-gavel" aria-hidden="true"></i></span>
              <h4 class="ml-3">Legal</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link text-dark underline" href="#">Legal Information</a>
                    <a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-gavel" aria-hidden="true"></i></span>
              <h4 class="ml-3">ggggg</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link text-dark underline" href="#">rgdgdrg</a>
                    <a class="nav-link text-dark underline" href="#">fthgdrgd</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-phone" aria-hidden="true"></i></span>
              <h4 class="ml-3">Language</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <select class="form-control form-control-sm">
                  <option>English</option>
                  <option>Spanish</option>
                  <option>German</option>
                  <option>Italian</option>
                  <option>Russian</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="col">
            <div class="d-flex">
              <span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
              <h4 class="ml-3">Account</h4>
            </div>
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
                <a class="nav-link text-dark underline" href="#">drgdg</a>
                <a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
                <a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
              </li>
            </ul>
          </div>
          <div class="col">
            <img src="img/youtube.png" id="youtube" alt="youtube">
          </div>
          
        </div>
      </div>
    </section>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script>
      $(window).scroll(function() {
        if ($("#menu").offset().top > 56) {
            $("#menu").addClass("nav-color");
        } else {
            $("#menu").removeClass("nav-color");
        }
        $('#prueba').val(window.scrollY);
        if ($('.scroll-spy').offset().top > 2500) {
          $('#prueba2').val(1);
          $('.scroll-spy').css('position', 'relative');
          $('.scroll-spy').css('top', '1800px');
        } else {
          $('#prueba2').val(2);
          $('.scroll-spy').css('position', 'sticky');
          $('.scroll-spy').css('top', '2rem');
        }
      });
      
    </script>
  </body>
</html>

Para verlo merjor abrirlo en pantalla completa el ejemplo.

1
  • Con una media query, y le indicas que despues de cierto punto se vuelva static no recuerdo muy bien todo el proceso pero la sintaxis es asi @media (los pixeles minimos o maximos) Commented el 9 jun. 2020 a las 14:01

1 respuesta 1

2

Parece ser que mi problema era que estaba haciendo offset().top the la clase ".scroll-spy" y cuando pasaba los 2500px le aplicaba un top de 1800px lo que causaba que el offset().top de ".scroll-spy" fuese siempre 1800px una vez pasados los 2500px que le puse como límite. La solución es usar "windows.scrollY" en su lugar. El código JQuery quedaría de la siguiente manera:

<script>
  $(window).scroll(function() {
    if ($("#menu").offset().top > 56) {
        $("#menu").addClass("nav-color");
    } else {
        $("#menu").removeClass("nav-color");
    }
    $('#prueba').val(window.scrollY);
    if (window.scrollY > 2500) {
      $('#prueba2').val(1);
      $('.scroll-spy').css('position', 'relative');
      $('.scroll-spy').css('top', '1800px');
    } else {
      $('#prueba2').val(2);
      $('.scroll-spy').css('position', 'sticky');
      $('.scroll-spy').css('top', '2rem');
    }
  });

</script>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.