Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Dependency free javascript library that makes elements on your page visible while you scroll
Dependency free javascript library that makes any element on your page visible while you scroll. Check out the demos.
This package can be installed with:
Or download the latest release.
<script src="/path_to/hc-sticky.js"></script>
In the script, including HC-Sticky will usually look like this:
const hcSticky = require('hc-sticky');
Be sure to call HC-Sticky once your element is available in the DOM.
var Sticky = new hcSticky('#element', {
stickTo: '#content'
});
jQuery(document).ready(function($) {
$('#element').hcSticky({
stickTo: '#content'
});
});
HC Sticky has a wide range of options you can set to have a full controll over the sticky elements.
Property | Default | Type | Description |
---|---|---|---|
top | 0 | int | The distance from the top of the Window at which to trigger HC-Sticky. |
bottom | 0 | int | The distance from the bottom of the Window at which to attach HC-Sticky. |
innerTop | 0 | int | The distance from the top inside of the sticky element at which to trigger HC-Sticky. |
innerSticker | null | string / element object | Element inside of the sticky element at which to attach HC-Sticky. This has higher priority than innerTop option. |
bottomEnd | 0 | int | The distance from the bottom of the referring element at which to stop HC-Sticky. |
stickTo | null (parent element) | string / element object | Element that represents the reference for height instead of height of the container. |
followScroll | true | boolean | When set to false , sticky content will not move with the page if it is bigger than Window. |
stickyClass | 'sticky' | string | HTML class that will be applied to sticky element while it is attached. |
responsive | null | object | Object containing responsive breakpoints, on which you can tell HC Sticky what to do. |
mobileFirst | null | boolean | Direction of the responsive queries. |
onStart | null | function | Callback function fired when the element becomes attached. |
onStop | null | function | Callback function fired when the element stops floating. |
onBeforeResize | null | function | Callback function fired before sticky has been resized (happens after Window resize and before sticky reinit). |
onResize | null | function | Callback function fired after sticky has been resized (happens after Window resize and sticky reinit). |
resizeDebounce | 100 | int | Limit the rate at which the HC Sticky can fire on window resize. |
Methods are used to control the plugin after initialization.
Method | Accepts | Description |
---|---|---|
options | string | Returns current settings, or a specific setting if you specify it. |
update | object | Updates the settings with the new ones. |
refresh | N/A | Recalculates sticky size and position. Useful after altering DOM elements inside sticky. |
detach | N/A | Detaches the HC-Sticky from element, preventing it from running. |
attach | N/A | Attaches the HC-Sticky back to the element. |
destroy | N/A | Completely destroys HC-Sticky and reverts element to original state. |
var Sticky = new hcSticky('#element', {
stickTo: '#content'
});
Sticky.update({
top: 20
});
var $sticky = $('#element');
$sticky.hcSticky({
stickTo: '#content'
});
$sticky.hcSticky('update', {
top: 20
});
This package comes with Gulp. The following tasks are available:
default
compiles the JS into /dist
and builds the Demos into demo/build
.watch
watches source JS and Demo files and builds them automatically whenever you save.You can pass a --dev
command if you don't want the compiled JS to be minified.
The code and the documentation are released under the MIT License.
FAQs
JavaScript library that makes any element on your page visible while you scroll
The npm package hc-sticky receives a total of 1,106 weekly downloads. As such, hc-sticky popularity was classified as popular.
We found that hc-sticky demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.