SVG不透明度变化通过滚动顶部解决;现在如何在 jQuery 中使用 "scrollBottom" 添加不透明度更改？

Question

几个星期前我问过这个问题，并从herrstrietzel那里得到了一个很棒的答案。从那以后，我决定根据与文档底部的距离再次淡出SVG，本质上是一个& rollbottom ":

var distanceFromBottom = $(document).height() - ($(document).scrollTop() + $(window).height());

我将这个答案用于类似的scrollBottom问题，并将我的代码改编如下。目前，没有任何东西在打印。有人能看出我哪里做错了吗?

let logo = $('.stickyMPlogo');
$(document).on('scroll', function() {
var distanceFromBottom = $(document).height() - ($(document).scrollTop() + $(window).height());
var scrollposition = $(this).scrollTop();
let closed = logo.hasClass('closed');

if ((distanceFromBottom < 400) && !closed) {
logo.toggleClass('opened closed');
} else if ((scrollposition < 800) && !closed) {
logo.toggleClass('opened closed');
} else if ((scrollposition > 800) && closed) {
logo.toggleClass('closed opened');
}
});

body {
margin: 0;
}
.frame {
width: 100%;
height: 1200px;
position: relative;
box-sizing: border-box;
}
.verticallogoFixed {
width: 5vh;
height: 80vh;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 2.25em;
z-index: 700;
margin: 0;
}
.stickyMPlogo {
fill: #07372F;
transition: 1s;
}
.verticallogoFixed .stickyMPlogo {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.stickyMPlogo:hover {
fill: #D5E900;
}
.svgLogo a {
overflow: hidden;
padding-left: 0.1vw;
padding-right: 0.1vw;
}
.closed {
opacity: 0;
visibility: hidden;
}
.opened {
opacity: 1;
visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frame">
<div class="verticallogoFixed">
<a href="http://melanie-patterson.com/" class="svgLogo">
<svg class="stickyMPlogo closed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 1200" fill="#D5E900">
<path d="M1.743 1096.853l68.161-32.474-68.16-25.37v-14.883h.845c0 7.273 6.005 7.78 22.665 7.78H62.8c16.66 0 22.664-.508 22.664-7.78h.846v22.833h-.846c0-7.273-6.004-7.78-22.664-7.78H4.534l75.602 28.076c-26.546 14.613-45.364 21.15-72.388 34.503l36.279.084c20.889.682 41.93-1.119 41.437-14.207h.846v22.833h-.846c0-7.272-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.508-22.664 7.78h-.846zm0-77.804v-60.55H13.16v.846c-10.478-.7-11.12 29.485-10.571 44.65h36.364c-9.416-10.07.946-20.246 1.353-30.274 0-3.213-1.861-6.258-4.82-6.258v-.846c4.989 0 9.302 4.144 9.302 10.825 0 10.317-7.273 14.63-7.442 20.634a7.175 7.175 0 0 0 2.96 5.92h45.158c-.446-10.818 2.366-42.783-13.108-44.65v-.847H86.31v60.55h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm0-88.459h.846c0 7.274 6.005 7.78 22.664 7.78h60.211c-.498-10.964 2.456-42.495-13.108-44.566v-.845H86.31v60.465h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846zm32.22-76.533c-1.607 0-2.283.93-2.283 2.03 0 4.059 8.88 6.596 8.88 11.416 0 2.368-2.283 2.791-4.482 1.945L.052 855.833v-.846l71.459-27.061c9.302-3.721 13.953-6.427 13.953-11.585h.846v27.737h-.846c0-11.924-6.85-11.5-15.39-8.287L42.42 846.276c49.873-7.207 58.144 40.325 29.09 41.608-20.803 0-28.752-33.827-37.547-33.827zm49.979 13.361c-.622-20.07-31.318-23.743-47.103-19.027L9.862 858.623l25.877 9.726c2.96 1.099 3.975.422 3.975-.93 0-3.89-8.88-7.02-8.88-11.501 0-1.608 1.1-2.791 3.298-2.791 11.332 0 14.884 27.568 35.772 27.568 7.949 0 14.038-4.99 14.038-13.277zM1.743 799.002l72.22-47.357c-17.211.588-72.082-4.438-71.374 14.208h-.846v-22.834h.846c0 7.273 6.005 7.78 22.664 7.78h62.748c1.394 1.533-81.51 53.535-81.522 54.375 16.771-1.027 79.921 5.545 78.985-14.206h.846V813.8h-.846c0-7.274-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846zm0-61.059V715.11h.846c0 7.273 6.005 7.78 22.664 7.78H62.8c16.66 0 22.664-.507 22.664-7.78h.846v22.833h-.846c0-7.274-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm0-27.907v-60.55H13.16v.846c-10.478-.7-11.12 29.485-10.571 44.651h36.364c-9.416-10.07.947-20.247 1.353-30.274 0-3.214-1.861-6.258-4.82-6.258v-.846c4.989 0 9.302 4.143 9.302 10.824 0 10.317-7.273 14.63-7.442 20.635a7.175 7.175 0 0 0 2.96 5.92h45.158c-.446-10.818 2.366-42.783-13.108-44.651v-.846H86.31v60.55h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.508-22.664 7.78zm0-95.223c.59-12.335-1.283-22.719-1.692-35.265 1.257-46.321 70.636-32.988 49.05 20.296h13.7c16.66 0 22.664-.507 22.664-7.78h.845v22.749h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm49.64-32.897C49.89 545.64-13.2 551.842 3.944 599.844h44.312a48.422 48.422 0 0 0 3.129-17.928zm-17.42-59.198c-1.607 0-2.283.93-2.283 2.03 0 4.06 8.88 6.596 8.88 11.416 0 2.368-2.283 2.791-4.482 1.945L.052 524.494v-.846l71.459-27.061c9.302-3.72 13.953-6.427 13.953-11.586h.846v27.738h-.846c0-11.924-6.85-11.5-15.39-8.287L42.42 514.938c49.872-7.208 58.144 40.324 29.09 41.607-20.803 0-28.752-33.827-37.547-33.827zm49.979 13.361c-.622-20.07-31.318-23.743-47.103-19.027L9.862 527.284l25.877 9.726c2.96 1.099 3.975.422 3.975-.93 0-3.89-8.88-7.02-8.88-11.501 0-1.607 1.1-2.791 3.298-2.791 11.332 0 14.884 27.569 35.772 27.569 7.949 0 14.038-4.99 14.038-13.278zM1.743 434.344H13.16v.845c-6.041-.525-10.505 10.491-10.571 25.116h60.21c16.66 0 22.665.17 22.665-7.103h.846v22.072h-.846c0-7.273-6.004-7.78-22.664-7.78H2.59c.067 14.625 4.53 25.641 10.57 25.116v.845H1.744zm0-64.188H13.16v.846c-6.041-.525-10.505 10.49-10.571 25.116h60.21c16.66 0 22.665.17 22.665-7.104h.846v22.072h-.846c0-7.272-6.004-7.78-22.664-7.78H2.59c.067 14.626 4.53 25.642 10.57 25.117v.845H1.744zm0-5.076v-60.548H13.16v.845c-10.478-.699-11.12 29.486-10.571 44.651h36.364c-9.416-10.072.947-20.247 1.353-30.275 0-3.213-1.861-6.258-4.82-6.258v-.845c4.989 0 9.302 4.143 9.302 10.824 0 10.317-7.273 14.63-7.442 20.634a7.176 7.176 0 0 0 2.96 5.92h45.158c-.446-10.817 2.366-42.783-13.108-44.65v-.846H86.31v60.549h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm83.721-65.624c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846C2.332 287.12.461 276.739.051 264.192c-1.813-34.953 44.866-38.172 45.837-3.89-.001 7.949-5.413 13.361-5.413 16.913 0 1.015.254 2.452 2.198 2.452 5.497 0 6.681-17.843 17.337-24.693 10.401-6.68 25.454-14.545 25.454-24.186h.846c.051 20.223 3.24 13.081-25.37 32.558-12.347 8.203-12.685 17.167-18.435 17.167a2.722 2.722 0 0 1-2.876-2.96c0-4.99 4.82-8.88 4.82-16.744-2.227-27.942-56.286-24.068-40.507 23.678H62.8c16.66 0 22.664-.507 22.664-7.78h.846v22.748zM.052 192.9a70.913 70.913 0 0 1 3.89-24.1h11.332v.845S1.067 174.803 1.067 192.9c0 15.73 9.556 24.355 18.943 24.355 23.17 0 14.968-53.446 44.566-53.446 11.755 0 23.425 12.178 23.425 31.713 0 11.163-5.666 21.057-10.317 27.315H66.352c-.889-1.528 20.155-10.893 20.126-32.05 0-12.348-9.048-22.073-18.435-22.073-25.454 0-18.266 54.46-46.004 54.46C10.285 223.176.052 212.436.052 192.9zm43.975-39.24c-58.094-.207-58.089-75.063 0-75.264 58.094.206 58.088 75.062 0 75.263zm0-7.612c56.683-.588 56.678-59.456-.002-60.041-56.851-.33-56.846 60.376.002 60.041zM1.743 55.983l72.22-47.357C56.752 9.213 1.882 4.188 2.59 22.833h-.846V0h.846c0 7.272 6.005 7.78 22.664 7.78h62.748C89.392 9.309 6.494 61.318 6.48 62.156 23.251 61.129 86.4 67.7 85.464 47.949h.846v22.833h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846z" />
</svg>
</a>
</div>
</div>

Answer 1

这样我就清楚了，可以更好地帮助你我可以检查一下你想让图像开始淡出，然后淡出，然后淡出，最后在滚动条结束时返回吗?

它似乎工作得更好，如果你把类已经检查出来，以帮助了解我添加了so控制台。日志记录提供有意义的读出，您可以使用它来检查在给定滚动位置时希望它显示或不显示的值，并调整if语句以匹配控制台日志

的值。

let logo = $('.stickyMPlogo');
$(document).on('scroll', function() {
var distanceFromBottom = $(document).height() - ($(document).scrollTop() + $(window).height());
var scrollposition = $(this).scrollTop();
console.log(`
distanceFromBottom:${parseInt(distanceFromBottom)}, 
scrollposition:${parseInt(scrollposition)},
hasClosed:${logo.hasClass('closed')},
hasOpen:${logo.hasClass('opened')}`)
if ((distanceFromBottom < 400)) {
logo.toggleClass('opened closed');
} else if ((scrollposition < 800)) {
logo.toggleClass('opened closed');
} else if ((scrollposition > 800)) {
logo.toggleClass('closed opened');
}
});

body {
margin: 0;
}
.frame {
width: 100%;
height: 1200px;
position: relative;
box-sizing: border-box;
}
.verticallogoFixed {
width: 5vh;
height: 80vh;
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 2.25em;
z-index: 700;
margin: 0;
}
.stickyMPlogo {
fill: #07372F;
transition: 1s;
}
.verticallogoFixed .stickyMPlogo {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.stickyMPlogo:hover {
fill: #D5E900;
}
.svgLogo a {
overflow: hidden;
padding-left: 0.1vw;
padding-right: 0.1vw;
}
.closed {
opacity: 0;
visibility: hidden;
}
.opened {
opacity: 1;
visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frame">
<div class="verticallogoFixed">
<a href="http://melanie-patterson.com/" class="svgLogo">
<svg class="stickyMPlogo closed" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 1200" fill="#D5E900">
<path d="M1.743 1096.853l68.161-32.474-68.16-25.37v-14.883h.845c0 7.273 6.005 7.78 22.665 7.78H62.8c16.66 0 22.664-.508 22.664-7.78h.846v22.833h-.846c0-7.273-6.004-7.78-22.664-7.78H4.534l75.602 28.076c-26.546 14.613-45.364 21.15-72.388 34.503l36.279.084c20.889.682 41.93-1.119 41.437-14.207h.846v22.833h-.846c0-7.272-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.508-22.664 7.78h-.846zm0-77.804v-60.55H13.16v.846c-10.478-.7-11.12 29.485-10.571 44.65h36.364c-9.416-10.07.946-20.246 1.353-30.274 0-3.213-1.861-6.258-4.82-6.258v-.846c4.989 0 9.302 4.144 9.302 10.825 0 10.317-7.273 14.63-7.442 20.634a7.175 7.175 0 0 0 2.96 5.92h45.158c-.446-10.818 2.366-42.783-13.108-44.65v-.847H86.31v60.55h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm0-88.459h.846c0 7.274 6.005 7.78 22.664 7.78h60.211c-.498-10.964 2.456-42.495-13.108-44.566v-.845H86.31v60.465h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846zm32.22-76.533c-1.607 0-2.283.93-2.283 2.03 0 4.059 8.88 6.596 8.88 11.416 0 2.368-2.283 2.791-4.482 1.945L.052 855.833v-.846l71.459-27.061c9.302-3.721 13.953-6.427 13.953-11.585h.846v27.737h-.846c0-11.924-6.85-11.5-15.39-8.287L42.42 846.276c49.873-7.207 58.144 40.325 29.09 41.608-20.803 0-28.752-33.827-37.547-33.827zm49.979 13.361c-.622-20.07-31.318-23.743-47.103-19.027L9.862 858.623l25.877 9.726c2.96 1.099 3.975.422 3.975-.93 0-3.89-8.88-7.02-8.88-11.501 0-1.608 1.1-2.791 3.298-2.791 11.332 0 14.884 27.568 35.772 27.568 7.949 0 14.038-4.99 14.038-13.277zM1.743 799.002l72.22-47.357c-17.211.588-72.082-4.438-71.374 14.208h-.846v-22.834h.846c0 7.273 6.005 7.78 22.664 7.78h62.748c1.394 1.533-81.51 53.535-81.522 54.375 16.771-1.027 79.921 5.545 78.985-14.206h.846V813.8h-.846c0-7.274-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846zm0-61.059V715.11h.846c0 7.273 6.005 7.78 22.664 7.78H62.8c16.66 0 22.664-.507 22.664-7.78h.846v22.833h-.846c0-7.274-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm0-27.907v-60.55H13.16v.846c-10.478-.7-11.12 29.485-10.571 44.651h36.364c-9.416-10.07.947-20.247 1.353-30.274 0-3.214-1.861-6.258-4.82-6.258v-.846c4.989 0 9.302 4.143 9.302 10.824 0 10.317-7.273 14.63-7.442 20.635a7.175 7.175 0 0 0 2.96 5.92h45.158c-.446-10.818 2.366-42.783-13.108-44.651v-.846H86.31v60.55h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.508-22.664 7.78zm0-95.223c.59-12.335-1.283-22.719-1.692-35.265 1.257-46.321 70.636-32.988 49.05 20.296h13.7c16.66 0 22.664-.507 22.664-7.78h.845v22.749h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm49.64-32.897C49.89 545.64-13.2 551.842 3.944 599.844h44.312a48.422 48.422 0 0 0 3.129-17.928zm-17.42-59.198c-1.607 0-2.283.93-2.283 2.03 0 4.06 8.88 6.596 8.88 11.416 0 2.368-2.283 2.791-4.482 1.945L.052 524.494v-.846l71.459-27.061c9.302-3.72 13.953-6.427 13.953-11.586h.846v27.738h-.846c0-11.924-6.85-11.5-15.39-8.287L42.42 514.938c49.872-7.208 58.144 40.324 29.09 41.607-20.803 0-28.752-33.827-37.547-33.827zm49.979 13.361c-.622-20.07-31.318-23.743-47.103-19.027L9.862 527.284l25.877 9.726c2.96 1.099 3.975.422 3.975-.93 0-3.89-8.88-7.02-8.88-11.501 0-1.607 1.1-2.791 3.298-2.791 11.332 0 14.884 27.569 35.772 27.569 7.949 0 14.038-4.99 14.038-13.278zM1.743 434.344H13.16v.845c-6.041-.525-10.505 10.491-10.571 25.116h60.21c16.66 0 22.665.17 22.665-7.103h.846v22.072h-.846c0-7.273-6.004-7.78-22.664-7.78H2.59c.067 14.625 4.53 25.641 10.57 25.116v.845H1.744zm0-64.188H13.16v.846c-6.041-.525-10.505 10.49-10.571 25.116h60.21c16.66 0 22.665.17 22.665-7.104h.846v22.072h-.846c0-7.272-6.004-7.78-22.664-7.78H2.59c.067 14.626 4.53 25.642 10.57 25.117v.845H1.744zm0-5.076v-60.548H13.16v.845c-10.478-.699-11.12 29.486-10.571 44.651h36.364c-9.416-10.072.947-20.247 1.353-30.275 0-3.213-1.861-6.258-4.82-6.258v-.845c4.989 0 9.302 4.143 9.302 10.824 0 10.317-7.273 14.63-7.442 20.634a7.176 7.176 0 0 0 2.96 5.92h45.158c-.446-10.817 2.366-42.783-13.108-44.65v-.846H86.31v60.549h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78zm83.721-65.624c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846C2.332 287.12.461 276.739.051 264.192c-1.813-34.953 44.866-38.172 45.837-3.89-.001 7.949-5.413 13.361-5.413 16.913 0 1.015.254 2.452 2.198 2.452 5.497 0 6.681-17.843 17.337-24.693 10.401-6.68 25.454-14.545 25.454-24.186h.846c.051 20.223 3.24 13.081-25.37 32.558-12.347 8.203-12.685 17.167-18.435 17.167a2.722 2.722 0 0 1-2.876-2.96c0-4.99 4.82-8.88 4.82-16.744-2.227-27.942-56.286-24.068-40.507 23.678H62.8c16.66 0 22.664-.507 22.664-7.78h.846v22.748zM.052 192.9a70.913 70.913 0 0 1 3.89-24.1h11.332v.845S1.067 174.803 1.067 192.9c0 15.73 9.556 24.355 18.943 24.355 23.17 0 14.968-53.446 44.566-53.446 11.755 0 23.425 12.178 23.425 31.713 0 11.163-5.666 21.057-10.317 27.315H66.352c-.889-1.528 20.155-10.893 20.126-32.05 0-12.348-9.048-22.073-18.435-22.073-25.454 0-18.266 54.46-46.004 54.46C10.285 223.176.052 212.436.052 192.9zm43.975-39.24c-58.094-.207-58.089-75.063 0-75.264 58.094.206 58.088 75.062 0 75.263zm0-7.612c56.683-.588 56.678-59.456-.002-60.041-56.851-.33-56.846 60.376.002 60.041zM1.743 55.983l72.22-47.357C56.752 9.213 1.882 4.188 2.59 22.833h-.846V0h.846c0 7.272 6.005 7.78 22.664 7.78h62.748C89.392 9.309 6.494 61.318 6.48 62.156 23.251 61.129 86.4 67.7 85.464 47.949h.846v22.833h-.846c0-7.273-6.004-7.78-22.664-7.78H25.253c-16.66 0-22.664.507-22.664 7.78h-.846z" />
</svg>
</a>
</div>
</div>

见https://jsfiddle.net/PatrickHume/2a8odh4e/1/

我希望这对你有帮助