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