biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-10-19 02:06:30 +00:00
Code Issues Projects Releases Wiki Activity

sticky header - lazyload - navbar - floatingpoints

Browse Source
This commit is contained in:
Tancre
2020-10-22 00:00:04 +02:00
parent 9d06322a82
commit 5d4331954f
19 changed files with 294 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/js/App.js
View File

@ -1,3 +1,9 @@
import $ from 'jquery';
import MobileMenu from './modules/MobileMenu';
import RevealOnScroll from './modules/RevealOnScroll';
import StickyHeader from './modules/StickyHeader';
var mobileMenu = new MobileMenu();
var mobileMenu = new MobileMenu();
new RevealOnScroll($(".how-it-works-1"), "79%");
new RevealOnScroll($(".how-it-works-2, .how-it-works-3"), "90%");
var stickyHeader = new StickyHeader();

3
app/assets/js/Vendor.js
View File

@ -1 +1,2 @@
import '../temp/modernizr';
// import '../temp/modernizr';
import 'lazysizes';

31
app/assets/js/modules/RevealOnScroll.js Normal file
View File

@ -0,0 +1,31 @@
import $ from 'jquery';
import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
class RevealOnScroll {
constructor(els, offset){
this.itemsToReveal = els;
this.offsetPercentage = offset;
this.hideInitially();
this.createWaypoints();
}
hideInitially() {
this.itemsToReveal.addClass("reveal-item");
}
createWaypoints() {
var that = this;
this.itemsToReveal.each( function(){
var currentItem = this;
new Waypoint({
element: currentItem,
handler: function() {
$(currentItem).addClass("reveal-item--is-visible");
},
offset: that.offsetPercentage
});
});
}
}
export default RevealOnScroll;

86
app/assets/js/modules/StickyHeader.js Normal file
View File

@ -0,0 +1,86 @@
import $ from 'jquery';
import waypoints from '../../../../node_modules/waypoints/lib/noframework.waypoints';
import smoothScroll from 'jquery-smooth-scroll';
class StickyHeader {
constructor() {
this.lazyImages = $(".lazyload");
this.siteHeader = $(".site-header");
this.siteLogo = $(".site-header__logo");
this.siteNav = $(".primary-nav");
this.siteLanguage = $(".site-header__language");
this.siteButton = $(".site-header__btn-container");
this.headerTriggerElement = $(".large-hero__title");
this.createHeaderWaypoint();
this.pageSections = $(".page-section");
this.headerLinks = $(".primary-nav a");
this.createPageSectionWaypoints();
this.addSmoothScrolling();
this.refreshWaypoints();
}
refreshWaypoints(){
this.lazyImages.on('load', function() {
Waypoint.refreshAll();
});
}
addSmoothScrolling() {
this.headerLinks.smoothScroll();
}
createHeaderWaypoint() {
var that = this;
new Waypoint({
element: this.headerTriggerElement[0],
handler: function(direction) {
if (direction == "down") {
that.siteHeader.addClass("site-header--dark");
that.siteLogo.addClass("site-header__logo--small");
that.siteNav.addClass("primary-nav--small");
that.siteLanguage.addClass("site-header__language--small");
that.siteButton.addClass("site-header__btn-container--small");
} else {
that.siteHeader.removeClass("site-header--dark");
that.siteLogo.removeClass("site-header__logo--small");
that.siteNav.removeClass("primary-nav--small");
that.siteLanguage.removeClass("site-header__language--small");
that.siteButton.removeClass("site-header__btn-container--small");
that.headerLinks.removeClass("is-current-link");
}
},
offset: "10%"
});
}
createPageSectionWaypoints() {
var that = this;
this.pageSections.each(function(){
var currentPageSection = this;
new Waypoint({
element: currentPageSection,
handler: function(direction){
if (direction == "down"){
var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
that.headerLinks.removeClass("is-current-link");
$(matchingHeaderLink).addClass("is-current-link");
}
}
});
new Waypoint({
element: currentPageSection,
handler: function(direction){
if (direction == "up"){
var matchingHeaderLink = currentPageSection.getAttribute("data-matching-link");
that.headerLinks.removeClass("is-current-link");
$(matchingHeaderLink).addClass("is-current-link");
}
},
offset: "-38%"
});
});
}
}
export default StickyHeader;