Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add target: variant #4409

Closed
wants to merge 1 commit into from
Closed

Add target: variant #4409

wants to merge 1 commit into from

Conversation

neupauer
Copy link
Contributor

Hey 馃憢!

This PR adds target: variant for the CSS selector :target.


Why?

A lot of sites has fixed nav on top of the page. When you navigate to an anchor link it gets covered up by a fixed header.

With target: variant we can target active anchor on the page. Step two is to add an offset, what is possieble by adding e.g., scroll-margin-top: 20px. When this PR would be accepted I would like to create also PR for the mentioned scroll-margin-* utilities.

<nav class="fixed h-20">
  <a href="#hello">Hello</a>
</nav>

<section id="hello" class="target:scroll-margin-top-24">
  Hello World
</section>

Demo: https://yie6f.csb.app/#target-2
Demo Code: https://codesandbox.io/s/scroll-margin-yie6f?file=/index.html

Signed-off-by: Peter Neupauer <peter@neupauer.sk>
@adamwathan
Copy link
Member

Hey thanks for this! I've collapsed this feature into #4482 and added you as a co-author on it to make sure you get credit for it but going to close this PR in favor of that one 鉂わ笍

@adamwathan adamwathan closed this May 26, 2021
@neupauer neupauer deleted the patch-2 branch May 26, 2021 20:39
@seanpdoyle seanpdoyle mentioned this pull request Jun 9, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants