mirror of
https://github.com/jgthms/bulma.git
synced 2025-01-09 15:44:25 +00:00
Fix scroll factor
This commit is contained in:
parent
74c413c378
commit
d11b8d78ef
@ -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 + ')';
|
||||||
|
@ -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
|
||||||
|
@ -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;
|
||||||
|
@ -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 + ')';
|
||||||
|
Loading…
Reference in New Issue
Block a user