library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix Safari momentum translation

Browse Source
This commit is contained in:
Jeremy Thomas 2017-11-07 14:03:21 +00:00
parent 130833803a
commit a78f026f69
2 changed files with 72 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
docs/_javascript/main.js
View File

@ -169,13 +169,13 @@ document.addEventListener('DOMContentLoaded', () => {
const navbarEl = document.getElementById('navbar'); const navbarEl = document.getElementById('navbar');
const navbarBurger = document.getElementById('navbarBurger'); const navbarBurger = document.getElementById('navbarBurger');
const specialShadow = document.getElementById('specialShadow'); const specialShadow = document.getElementById('specialShadow');
const navbarHeight = 52; const NAVBAR_HEIGHT = 52;
const THRESHOLD = 160;
let navbarOpen = false; let navbarOpen = false;
let pinned = false; let horizon = NAVBAR_HEIGHT;
let horizon = navbarHeight;
let whereYouStoppedScrolling = 0; let whereYouStoppedScrolling = 0;
let threshold = 160;
let scrollFactor = 0; let scrollFactor = 0;
let currentTranslate = 0;
navbarBurger.addEventListener('click', el => { navbarBurger.addEventListener('click', el => {
navbarOpen = !navbarOpen; navbarOpen = !navbarOpen;
@ -195,55 +195,69 @@ document.addEventListener('DOMContentLoaded', () => {
} }
function goingDown(currentY) { function goingDown(currentY) {
const trigger = navbarHeight; const trigger = NAVBAR_HEIGHT;
whereYouStoppedScrolling = currentY; whereYouStoppedScrolling = currentY;
if (currentY > horizon) { if (currentY > horizon) {
horizon = currentY; horizon = currentY;
} }
translateHeader(currentY); translateHeader(currentY, false);
} }
function goingUp(currentY) { function goingUp(currentY) {
const trigger = 0; const trigger = 0;
if (currentY < (whereYouStoppedScrolling - navbarHeight)) { if (currentY < (whereYouStoppedScrolling - NAVBAR_HEIGHT)) {
horizon = currentY + navbarHeight; horizon = currentY + NAVBAR_HEIGHT;
} }
translateHeader(currentY); translateHeader(currentY, true);
} }
function constrainDelta(delta) { function constrainDelta(delta) {
return Math.max(0, Math.min(delta, navbarHeight)); return Math.max(0, Math.min(delta, NAVBAR_HEIGHT));
} }
function translateHeader(currentY) { function translateHeader(currentY, upwards) {
const delta = constrainDelta(Math.abs(currentY - horizon)); // let topTranslateValue;
const translateValue = delta - navbarHeight; let translateValue;
const translateFactor = 1 + translateValue / navbarHeight;
let navbarStyle = `
transform: translateY(${translateValue}px);
`;
if (currentY > threshold * 2) { if (upwards && currentTranslate == 0) {
translateValue = 0;
} else if (currentY <= NAVBAR_HEIGHT) {
translateValue = currentY * -1;
} else {
const delta = constrainDelta(Math.abs(currentY - horizon));
translateValue = delta - NAVBAR_HEIGHT;
}
if (translateValue != currentTranslate) {
const navbarStyle = `
transform: translateY(${translateValue}px);
`;
currentTranslate = translateValue;
navbarEl.setAttribute('style', navbarStyle);
}
if (currentY > THRESHOLD * 2) {
scrollFactor = 1; scrollFactor = 1;
} else if (currentY > threshold) { } else if (currentY > THRESHOLD) {
scrollFactor = (currentY - threshold) / threshold; scrollFactor = (currentY - THRESHOLD) / THRESHOLD;
} else { } else {
scrollFactor = 0; scrollFactor = 0;
} }
const translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
specialShadow.style.opacity = scrollFactor; specialShadow.style.opacity = scrollFactor;
specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
navbarEl.setAttribute('style', navbarStyle);
} }
translateHeader(window.scrollY); translateHeader(window.scrollY, false);
let ticking = false; let ticking = false;
let lastY = 0; let lastY = 0;
window.addEventListener('scroll', function() { window.addEventListener('scroll', function() {
const currentY = window.scrollY; const currentY = window.scrollY;

56
docs/lib/main.js
View File

@ -171,13 +171,13 @@ document.addEventListener('DOMContentLoaded', function () {
var navbarEl = document.getElementById('navbar'); var navbarEl = document.getElementById('navbar');
var navbarBurger = document.getElementById('navbarBurger'); var navbarBurger = document.getElementById('navbarBurger');
var specialShadow = document.getElementById('specialShadow'); var specialShadow = document.getElementById('specialShadow');
var navbarHeight = 52; var NAVBAR_HEIGHT = 52;
var THRESHOLD = 160;
var navbarOpen = false; var navbarOpen = false;
var pinned = false; var horizon = NAVBAR_HEIGHT;
var horizon = navbarHeight;
var whereYouStoppedScrolling = 0; var whereYouStoppedScrolling = 0;
var threshold = 160;
var scrollFactor = 0; var scrollFactor = 0;
var currentTranslate = 0;
navbarBurger.addEventListener('click', function (el) { navbarBurger.addEventListener('click', function (el) {
navbarOpen = !navbarOpen; navbarOpen = !navbarOpen;
@ -197,53 +197,67 @@ document.addEventListener('DOMContentLoaded', function () {
} }
function goingDown(currentY) { function goingDown(currentY) {
var trigger = navbarHeight; var trigger = NAVBAR_HEIGHT;
whereYouStoppedScrolling = currentY; whereYouStoppedScrolling = currentY;
if (currentY > horizon) { if (currentY > horizon) {
horizon = currentY; horizon = currentY;
} }
translateHeader(currentY); translateHeader(currentY, false);
} }
function goingUp(currentY) { function goingUp(currentY) {
var trigger = 0; var trigger = 0;
if (currentY < whereYouStoppedScrolling - navbarHeight) { if (currentY < whereYouStoppedScrolling - NAVBAR_HEIGHT) {
horizon = currentY + navbarHeight; horizon = currentY + NAVBAR_HEIGHT;
} }
translateHeader(currentY); translateHeader(currentY, true);
} }
function constrainDelta(delta) { function constrainDelta(delta) {
return Math.max(0, Math.min(delta, navbarHeight)); return Math.max(0, Math.min(delta, NAVBAR_HEIGHT));
} }
function translateHeader(currentY) { function translateHeader(currentY, upwards) {
var delta = constrainDelta(Math.abs(currentY - horizon)); // let topTranslateValue;
var translateValue = delta - navbarHeight; var translateValue = void 0;
var translateFactor = 1 + translateValue / navbarHeight;
var navbarStyle = '\n transform: translateY(' + translateValue + 'px);\n ';
if (currentY > threshold * 2) { if (upwards && currentTranslate == 0) {
translateValue = 0;
} else if (currentY <= NAVBAR_HEIGHT) {
translateValue = currentY * -1;
} else {
var delta = constrainDelta(Math.abs(currentY - horizon));
translateValue = delta - NAVBAR_HEIGHT;
}
if (translateValue != currentTranslate) {
var navbarStyle = '\n transform: translateY(' + translateValue + 'px);\n ';
currentTranslate = translateValue;
navbarEl.setAttribute('style', navbarStyle);
}
if (currentY > THRESHOLD * 2) {
scrollFactor = 1; scrollFactor = 1;
} else if (currentY > threshold) { } else if (currentY > THRESHOLD) {
scrollFactor = (currentY - threshold) / threshold; scrollFactor = (currentY - THRESHOLD) / THRESHOLD;
} else { } else {
scrollFactor = 0; scrollFactor = 0;
} }
var translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
specialShadow.style.opacity = scrollFactor; specialShadow.style.opacity = scrollFactor;
specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
navbarEl.setAttribute('style', navbarStyle);
} }
translateHeader(window.scrollY); translateHeader(window.scrollY, false);
var ticking = false; var ticking = false;
var lastY = 0; var lastY = 0;
window.addEventListener('scroll', function () { window.addEventListener('scroll', function () {
var currentY = window.scrollY; var currentY = window.scrollY;