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: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> /* -------------------------------------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; } <!-- language: lang-html --> <!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> <!-- end snippet --> Para verlo merjor abrirlo en pantalla completa el ejemplo.