Fix scroll factor

This commit is contained in:
Jeremy Thomas 2017-10-26 20:00:25 +01:00
parent 74c413c378
commit d11b8d78ef
4 changed files with 12 additions and 8 deletions

View File

@ -174,7 +174,7 @@ document.addEventListener('DOMContentLoaded', () => {
let pinned = false; let pinned = false;
let horizon = navbarHeight; let horizon = navbarHeight;
let whereYouStoppedScrolling = 0; let whereYouStoppedScrolling = 0;
let threshold = 200; let threshold = 160;
let scrollFactor = 0; let scrollFactor = 0;
navbarBurger.addEventListener('click', el => { navbarBurger.addEventListener('click', el => {
@ -227,10 +227,12 @@ document.addEventListener('DOMContentLoaded', () => {
transform: translateY(${translateValue}px); transform: translateY(${translateValue}px);
`; `;
if (currentY > threshold) { if (currentY > threshold * 2) {
scrollFactor = 1; scrollFactor = 1;
} else if (currentY > threshold) {
scrollFactor = (currentY - threshold) / threshold;
} else { } else {
scrollFactor = currentY / threshold; scrollFactor = 0;
} }
specialShadow.style.opacity = scrollFactor; specialShadow.style.opacity = scrollFactor;
specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; specialShadow.style.transform = 'scaleY(' + translateFactor + ')';

View File

@ -1,6 +1,6 @@
.bd-special-shadow .bd-special-shadow
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0)) background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
height: 10px height: 8px
left: 0 left: 0
opacity: 0 opacity: 0
position: absolute position: absolute

View File

@ -10356,7 +10356,7 @@ svg {
.bd-special-shadow { .bd-special-shadow {
background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent); background-image: linear-gradient(rgba(0, 0, 0, 0.1), transparent);
height: 10px; height: 8px;
left: 0; left: 0;
opacity: 0; opacity: 0;
position: absolute; position: absolute;

View File

@ -176,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
var pinned = false; var pinned = false;
var horizon = navbarHeight; var horizon = navbarHeight;
var whereYouStoppedScrolling = 0; var whereYouStoppedScrolling = 0;
var threshold = 200; var threshold = 160;
var scrollFactor = 0; var scrollFactor = 0;
navbarBurger.addEventListener('click', function (el) { navbarBurger.addEventListener('click', function (el) {
@ -227,10 +227,12 @@ document.addEventListener('DOMContentLoaded', function () {
var translateFactor = 1 + translateValue / navbarHeight; var translateFactor = 1 + translateValue / navbarHeight;
var navbarStyle = '\n transform: translateY(' + translateValue + 'px);\n '; var navbarStyle = '\n transform: translateY(' + translateValue + 'px);\n ';
if (currentY > threshold) { if (currentY > threshold * 2) {
scrollFactor = 1; scrollFactor = 1;
} else if (currentY > threshold) {
scrollFactor = (currentY - threshold) / threshold;
} else { } else {
scrollFactor = currentY / threshold; scrollFactor = 0;
} }
specialShadow.style.opacity = scrollFactor; specialShadow.style.opacity = scrollFactor;
specialShadow.style.transform = 'scaleY(' + translateFactor + ')'; specialShadow.style.transform = 'scaleY(' + translateFactor + ')';