Issue
so as I described in the title, I have this HTML
<li class="table-of-content"><a href="#info">© INFO</a></li>
When I click on it, the page scrolls down to the banner that has id="info"
, but the problem is that I have a sticky-navbar that covers the scrolled content!
Can we adjust a custom position for the scroll, so it scrolls down for like 100px after the sticky-navbar?
I know there is other solutions like inserting another element above my HTML and add id="info"
so it scrolls to it and the content won't be covered by the sticky-navbar but I want to have a custom scroll position to the screen.. doesn't really matter if it's JS or CSS
any help is appreciated!
Solution
I recommend using scroll-margin-top
on the section
s you're linking to. Here's an example (note: I added smooth scrolling for a nicer effect, but it's totally optional). More on scroll-margin-top
here.
html,
body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
nav {
height: 3rem;
position: sticky;
top: 0;
background: white;
}
section {
scroll-margin-top: 4rem;
}
<nav>
<ul>
<li><a href="#anchor-1"> section 1 </a></li>
<li><a href="#anchor-2"> section 2 </a></li>
<li><a href="#anchor-3"> section 3 </a></li>
</ul>
</nav>
<section id="anchor-1">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
</section>
<section id="anchor-2">
<h2>Section 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
</section>
<section id="anchor-3">
<h2>Section 3</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt amet ea, nesciunt, officia nobis id facere esse, unde deleniti odit et dolorem optio obcaecati quae magni inventore? Molestiae, officia, dolorum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nobis, omnis veniam tempora quidem recusandae ipsum blanditiis cumque nesciunt! Numquam nemo laboriosam, autem fuga, iure enim eos vero laudantium et!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam ad esse veritatis dolore sapiente quo quam quae ipsam neque alias modi voluptatibus animi pariatur in, harum eligendi doloremque repellat obcaecati. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis saepe earum quod natus consectetur voluptas ea, assumenda nobis blanditiis qui aut, et facilis vel inventore similique. Amet quis, totam provident.
</p>
</section>
Answered By - Andy Hoffman
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.