Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@craftkit/craft-widget-stickyheadernavi
Advanced tools
Readme
Sticky header navigation system with parallax scrolling effect, for both browser and PWA.
Try online tutorial:
https://github.com/craftkit/craftkit-playground
Direct use:
<script src="https://unpkg.com/@craftkit/craft-uikit/dist/craft-uikit.min.js"></script>
<script src="https://unpkg.com/@craftkit/craft-widget-stickyheadernavi/dist/craft-widget-stickyheadernavi.min.js"></script>
<script>
window.onload = function(){
Craft.Core.Bootstrap.boot(App);
};
</script>
or webpack style:
import * as Craft from '@craftkit/craft-uikit';
import * as StickyHeaderNavi from '@craftkit/craft-widget-stickyheadernavi';
Craft.usePackage(StickyHeaderNavi);
export class PageController extends Craft.Widget.StickyHeaderNavi.ViewController { ... }
Header constructor requires 2 element, one is Large view, one is Small view.
Header starts in Large view, and when you scrolled over Sticky threshold
, Small View is shown.
You can implement your Header as a sub-class of Craft.Widget.StickyHeaderNavi.Header
abstruct class.
class MyHeader extends Craft.Widget.StickyHeaderNavi.Header {}
let header = new MyHeader({
large : new LargeTitle(),
small : new SmallTitle()
}),
The abstruct class implements several interface to support sticky behaviour with some restriction.
You have to define height
of your Large View and Small View in its style for .root
class element.
Because the Small View (or sometimes Large View if in the state of scrolled) is not in the DOM until it enabled.
like this:
class Title extends Craft.UI.View { ... }
class LargeTitle extends Title {
style(componentId){
return super.style(componentId) + `
.root { height: 88px; }
`;
}
}
class SmallTitle extends Title {
style(componentId){
return super.style(componentId) + `
.root { height: 44px; }
`;
}
}
If you want to make dynamically rendered Large and Small View, you have to override below method. See JSDoc comment for details.
Item | Method | Description |
---|---|---|
Large height | getLargeHeight | The height of large view should be defined in its root style. |
Small height | getSmallHeight | The height of small view should be defined in its root style. |
Sticky threshold | getStickyThreshold | Threshold of scroll amount to make header sticky |
Event | Description |
---|---|
onEnterSticky | called when the page scrolled to sticky height .By default, when scrolled over sticky amount, large view is hidden and small view is shown. |
onExitSticky | called when the page scroll backed to top area By default, when scroll back to top area less than sticky height , large view is shown and small view is hidden. |
onAppearBackButton | called when the back button appeared By default, both large and small view will slide out 44px (defined in .slide_out css class). |
onDisappearBackButton | called when the back button disappeared By default, both large and small view will turn back to the original position (defined in .slide_in css class). |
MIT
FAQs
Sticky header navigation system with parallax scrolling effect, for both browser and PWA.
The npm package @craftkit/craft-widget-stickyheadernavi receives a total of 12 weekly downloads. As such, @craftkit/craft-widget-stickyheadernavi popularity was classified as not popular.
We found that @craftkit/craft-widget-stickyheadernavi 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.