I am making a vertical navigation menu and when doing scroll
, the links that it has move, I would like to know a way to prevent these links from moving when doing scroll
and that they remain fixed.
HTML:
<nav class="col-md-2 sidebar bg-dark"> <a class="nav-link" href="">Home</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Link</a> <a class="nav-link" href="#">Salir</a> </nav> <main class="col-md-10"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, ullam. Perspiciatis, beatae. Modi at ea deserunt pariatur officiis porro ad laboriosam soluta totam, delectus temporibus dolore velit officia magni? Deserunt explicabo iusto nemo fugiat in, eius nobis laboriosam illo earum, iure, facere ad aliquam eligendi impedit nam repellendus sunt atque ut porro aliquid? Aliquid eius officiis recusandae aperiam exercitationem nobis omnis placeat nulla debitis expedita voluptas ad a modi pariatur, error suscipit sint at facere necessitatibus iure deleniti voluptatum facilis in! Tempora nobis, accusantium nemo totam sed at neque sequi, alias assumenda asperiores temporibus quod dolore! Dolorum voluptates delectus explicabo accusantium, quaerat temporibus voluptas doloremque minima! Voluptates, et ut? Ducimus perferendis totam quidem vel necessitatibus culpa rerum dolorum corrupti? Quo possimus, atque voluptatem modi recusandae eius molestiae pariatur quae repellendus dignissimos aut repudiandae voluptatum, soluta vero ducimus cumque eum exercitationem at excepturi expedita sit aperiam perspiciatis veniam beatae! Amet sapiente a at magni quo, reiciendis temporibus sequi iusto harum quod voluptas excepturi facere ab sit alias incidunt perspiciatis beatae. Iste accusantium reprehenderit omnis magni nam suscipit asperiores a, nulla blanditiis rerum id quos! Nam velit quos quaerat dignissimos eum nemo eos, accusamus blanditiis placeat, ducimus quae perspiciatis voluptatibus maxime et fugit soluta unde! Sunt aliquam itaque dolorum maxime aliquid rerum reprehenderit aut ut animi hic, et quidem labore vero nobis odit tenetur facere nisi at est. Tempore id sit quia, ea repellat alias fuga, maiores, non consectetur facilis quos maxime laboriosam! Nesciunt ipsum dolorum incidunt? Quasi dolorum quo sapiente accusamus sed, quibusdam accusantium nisi. Sapiente quod repudiandae quas dolorem sit vero sint deserunt quae, magnam pariatur ullam numquam molestias accusantium voluptatum molestiae beatae eum dolorum ut totam! Ducimus est dolor commodi sit possimus qui exercitationem libero nulla recusandae dicta, rem unde odio eos dolores totam molestias ipsa dolorem sint tempora! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, ullam. Perspiciatis, beatae. Modi at ea deserunt pariatur officiis porro ad laboriosam soluta totam, delectus temporibus dolore velit officia magni? Deserunt explicabo iusto nemo fugiat in, eius nobis laboriosam illo earum, iure, facere ad aliquam eligendi impedit nam repellendus sunt atque ut porro aliquid? Aliquid eius officiis recusandae aperiam exercitationem nobis omnis placeat nulla debitis expedita voluptas ad a modi pariatur, error suscipit sint at facere necessitatibus iure deleniti voluptatum facilis in! Tempora nobis, accusantium nemo totam sed at neque sequi, alias assumenda asperiores temporibus quod dolore! Dolorum voluptates delectus explicabo accusantium, quaerat temporibus voluptas doloremque minima! Voluptates, et ut? Ducimus perferendis totam quidem vel necessitatibus culpa rerum dolorum corrupti? Quo possimus, atque voluptatem modi recusandae eius molestiae pariatur quae repellendus dignissimos aut repudiandae voluptatum, soluta vero ducimus cumque eum exercitationem at excepturi expedita sit aperiam perspiciatis veniam beatae! Amet sapiente a at magni quo, reiciendis temporibus sequi iusto harum quod voluptas excepturi facere ab sit alias incidunt perspiciatis beatae. Iste accusantium reprehenderit omnis magni nam suscipit asperiores a, nulla blanditiis rerum id quos! Nam velit quos quaerat dignissimos eum nemo eos, accusamus blanditiis placeat, ducimus quae perspiciatis voluptatibus maxime et fugit soluta unde! Sunt aliquam itaque dolorum maxime aliquid rerum reprehenderit aut ut animi hic, et quidem labore vero nobis odit tenetur facere nisi at est. Tempore id sit quia, ea repellat alias fuga, maiores, non consectetur facilis quos maxime laboriosam! Nesciunt ipsum dolorum incidunt? Quasi dolorum quo sapiente accusamus sed, quibusdam accusantium nisi. Sapiente quod repudiandae quas dolorem sit vero sint deserunt quae, magnam pariatur ullam numquam molestias accusantium voluptatum molestiae beatae eum dolorum ut totam! Ducimus est dolor commodi sit possimus qui exercitationem libero nulla recusandae dicta, rem unde odio eos dolores totam molestias ipsa dolorem sint tempora! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, ullam. Perspiciatis, beatae. Modi at ea deserunt pariatur officiis porro ad laboriosam soluta totam, delectus temporibus dolore velit officia magni? Deserunt explicabo iusto nemo fugiat in, eius nobis laboriosam illo earum, iure, facere ad aliquam eligendi impedit nam repellendus sunt atque ut porro aliquid? Aliquid eius officiis recusandae aperiam exercitationem nobis omnis placeat nulla debitis expedita voluptas ad a modi pariatur, error suscipit sint at facere necessitatibus iure deleniti voluptatum facilis in! Tempora nobis, accusantium nemo totam sed at neque sequi, alias assumenda asperiores temporibus quod dolore! Dolorum voluptates delectus explicabo accusantium, quaerat temporibus voluptas doloremque minima! Voluptates, et ut? Ducimus perferendis totam quidem vel necessitatibus culpa rerum dolorum corrupti? Quo possimus, atque voluptatem modi recusandae eius molestiae pariatur quae repellendus dignissimos aut repudiandae voluptatum, soluta vero ducimus cumque eum exercitationem at excepturi expedita sit aperiam perspiciatis veniam beatae! Amet sapiente a at magni quo, reiciendis temporibus sequi iusto harum quod voluptas excepturi facere ab sit alias incidunt perspiciatis beatae. Iste accusantium reprehenderit omnis magni nam suscipit asperiores a, nulla blanditiis rerum id quos! Nam velit quos quaerat dignissimos eum nemo eos, accusamus blanditiis placeat, ducimus quae perspiciatis voluptatibus maxime et fugit soluta unde! Sunt aliquam itaque dolorum maxime aliquid rerum reprehenderit aut ut animi hic, et quidem labore vero nobis odit tenetur facere nisi at est. Tempore id sit quia, ea repellat alias fuga, maiores, non consectetur facilis quos maxime laboriosam! Nesciunt ipsum dolorum incidunt? Quasi dolorum quo sapiente accusamus sed, quibusdam accusantium nisi. Sapiente quod repudiandae quas dolorem sit vero sint deserunt quae, magnam pariatur ullam numquam molestias accusantium voluptatum molestiae beatae eum dolorum ut totam! Ducimus est dolor commodi sit possimus qui exercitationem libero nulla recusandae dicta, rem unde odio eos dolores totam molestias ipsa dolorem sint tempora! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus, ullam. Perspiciatis, beatae. Modi at ea deserunt pariatur officiis porro ad laboriosam soluta totam, delectus temporibus dolore velit officia magni? Deserunt explicabo iusto nemo fugiat in, eius nobis laboriosam illo earum, iure, facere ad aliquam eligendi impedit nam repellendus sunt atque ut porro aliquid? Aliquid eius officiis recusandae aperiam exercitationem nobis omnis placeat nulla debitis expedita voluptas ad a modi pariatur, error suscipit sint at facere necessitatibus iure deleniti voluptatum facilis in! Tempora nobis, accusantium nemo totam sed at neque sequi, alias assumenda asperiores temporibus quod dolore! Dolorum voluptates delectus explicabo accusantium, quaerat temporibus voluptas doloremque minima! Voluptates, et ut? Ducimus perferendis totam quidem vel necessitatibus culpa rerum dolorum corrupti? Quo possimus, atque voluptatem modi recusandae eius molestiae pariatur quae repellendus dignissimos aut repudiandae voluptatum, soluta vero ducimus cumque eum exercitationem at excepturi expedita sit aperiam perspiciatis veniam beatae! Amet sapiente a at magni quo, reiciendis temporibus sequi iusto harum quod voluptas excepturi facere ab sit alias incidunt perspiciatis beatae. Iste accusantium reprehenderit omnis magni nam suscipit asperiores a, nulla blanditiis rerum id quos! Nam velit quos quaerat dignissimos eum nemo eos, accusamus blanditiis placeat, ducimus quae perspiciatis voluptatibus maxime et fugit soluta unde! Sunt aliquam itaque dolorum maxime aliquid rerum reprehenderit aut ut animi hic, et quidem labore vero nobis odit tenetur facere nisi at est. Tempore id sit quia, ea repellat alias fuga, maiores, non consectetur facilis quos maxime laboriosam! Nesciunt ipsum dolorum incidunt? Quasi dolorum quo sapiente accusamus sed, quibusdam accusantium nisi. Sapiente quod repudiandae quas dolorem sit vero sint deserunt quae, magnam pariatur ullam numquam molestias accusantium voluptatum molestiae beatae eum dolorum ut totam! Ducimus est dolor commodi sit possimus qui exercitationem libero nulla recusandae dicta, rem unde odio eos dolores totam molestias ipsa dolorem sint tempora! </main>
CSS:
*{
margin: 0;
padding: 0;
}
html{
font-family: "Century Gothic", sans-serif;
font-size: 16px;
}
nav{
height: 100vh;
}
Note: I do the vertical menu with bootstrap
, that's why I don't put any property in the css to place it on the left.
What happens when scrolling:
What I want to happen when scrolling:
The menu stays fixed while the main is moving.
You can achieve it with
overflow: scroll;
like this: