Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@bitovi/scrolling-nav
Advanced tools
@bitovi/scrolling-nav
Just drop it in to enable quick navigation to sections of your page.
scrolling-nav
A web component for navigating to sections of your page that can stick as you scroll.
Setup
If you are using a module loader, you can install the web component with NPM like:
npm install @bitovi/scrolling-nav
Import the web component:
import "../../node_modules/@bitovi/scrolling-nav";
Use
To use, just insert the HTML element tag created by the package.
<scrolling-nav></scrolling-nav>
That's it.
Changing Default Configuration
You can optionally provide attributes to the component to customize your experience. Here are the default attribute values.
<scrolling-nav
scrollable-container-selector="window"
heading-selector="h2"
></scrolling-nav>
Attributes
scrollable-container-selector
- required:
false - type:
string - default:
"window"
The scrollable-container-selector attribute is the tag (HTML element, class, or ID) contains the section headings that you want to scroll to. By default, it will be the window.
<scrolling-nav scrollable-container-selector=".header"></scrolling-nav>
heading-selector
- required:
false - type:
string - default:
"h2"
The heading-selector attribute is the tag (HTML element, class, or ID) that will be used to create the navbar items. By default, it will scour the <body> for H2 tags.
<scrolling-nav heading-selector="h3"><scrolling-nav>
Custom Styles
You can override or modify the default styles by using the provided IDs and classes. The component is structured like the following:
<scrolling-nav>
<ul class="scrolling-nav-inner">
...
<ul class="scrolling-nav-item">
<a>Heading Example 1</a>
</ul>
...
<ul class="scrolling-nav-item">
<a>Heading Example 2</a>
</ul>
...
</div>
</scrolling-nav>
Navbar Wrapper
To customize the styles of the navbar container, use the following tag in your styles:
scrolling-nav {}
Navbar Inner Container
To customize the styles of the navbar inner container (which is scrolled by the outer container), use the following ID in your styles:
scrolling-nav > ul {}
Navbar Items
To customize the styles of the navbar's items, use the following class in your styles:
scrolling-nav > ul > li {}
If you want to customize the active state of a nav item, use the following class in your styles:
scrolling-nav > ul > li.scrolling-nav-active {}
The scrolling-nav-active class is added whenever the section represented by the nav item is in or below the top 1/3 of the page and above of the next section in the page. The scrolling-nav-active class will only be applied to one item at a time.
Notes
Using TypeScript + TSX
You may get the following linting error on the web component: Property 'scrolling-nav' does not exist on type 'JSX.IntrinsicElements'. To fix this, add the following snippet to your declarations.d.ts file.
// In ~/declarations.d.ts
declare namespace JSX {
// ...
interface IntrinsicElements {
// ...
"scrolling-nav": any;
}
}
FAQs
Just drop it in to enable quick navigation to sections of your page.
We found that @bitovi/scrolling-nav demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Package last updated on 05 May 2021
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024