DIV淡出在onscroll与JQuery，但没有触发每个像素

Question

我在div中有一个SVG，它应该以0%的不透明度开始，然后当我向下滚动到800px时，通过jQuery淡入到100%。目前,它是:

1. 以完全不透明度(而不是0%)加载，然后淡出并再次返回
2. 反复拍摄(例如，在像素800时逐渐淡入，在801、802时再次淡入);等等)。

我该如何修复这个只触发一次?

编辑:我改编了Johannes发布的代码并替换为下面的代码。问题2现已解决，但问题1仍然存在。

$var status_1 = "closed";
$(window).scroll(function() {
var scrollposition = $(this).scrollTop();
if ((scrollposition > 800) && (status_1 == "closed")) {
$('.verticallogoFixed .stickyMPlogo').fadeIn(1000);
status_1 = "open";
}
if ((scrollposition < 800) && (status_1 == "open")) {
$('.verticallogoFixed .stickyMPlogo').fadeOut(1000);
status_1 = "closed";
}
});

.verticallogoFixed {
width: 5vh;
height: 80vh;
position: fixed;
top: 50%;
transform: translatey(-50%);
left: 2.25em;
z-index: 700;
margin: 0;
}
.verticallogoFixed .stickyMPlogo {
position: absolute;
top: 50%;
transform: translatey(-50%);
/* display: none; */
margin: 0;
}
.stickyMPlogo {
fill: #07372F;
transition: 0.3s;
}
.stickyMPlogo:hover {
fill: #D5E900;
}
.svgLogo a {
overflow: hidden;
padding-left: 0.1vw;
padding-right: 0.1vw;
}
.containerDemo {
height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="containerDemo">
<div class="verticallogoFixed">
<a href="http://melanie-patterson.com/" class="svgLogo">
<svg class="stickyMPlogo" 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 class="content">
</div>
</div>

修订jsFiddle,原始版本jsFiddle

谢谢!

Answer 1

你也可以通过切换类来实现这个渐变动画("opened"closed":

let logo = $('.stickyMPlogo');
$(window).scroll(function() {
var scrollposition = $(this).scrollTop();
let closed = logo.hasClass('closed');
//fade in
if ((scrollposition > 800) && closed ) {
logo.toggleClass('closed opened')
console.log('open')
}
//fade out
else if ((scrollposition < 800) && !closed ) {
logo.toggleClass('opened closed')
console.log('close')
} 
});

.verticallogoFixed {
width: 5vh;
height: 80vh;
position: fixed;
top: 50%;
transform: translatey(-50%);
left: 2.25em;
z-index: 700;
margin: 0;
}
.verticallogoFixed .stickyMPlogo {
position: absolute;
top: 50%;
transform: translatey(-50%);
/* display: none; */
margin: 0;
}
.stickyMPlogo {
fill: #07372F;
transition: 1s;
}
.stickyMPlogo:hover {
fill: #D5E900;
}
.svgLogo a {
overflow: hidden;
padding-left: 0.1vw;
padding-right: 0.1vw;
}
.containerDemo {
height: 2000px;
}

.stickyMPlogo{
transition:0.5s;
}
.closed{
opacity:0;
visibility:hidden;
}
.opened{
opacity:1;
visibility:visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p>Scroll down to fade in logo</p>
<div class="containerDemo">
<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.7 1096.9 68.2-32.5L1.7 1039v-14.9h.9c0 7.3 6 7.8 22.7 7.8h37.5c16.7 0 22.7-.5 22.7-7.8h.8v22.9h-.8c0-7.3-6-7.8-22.7-7.8H4.5l75.6 28c-26.5 14.7-45.3 21.2-72.4 34.6H44c21 .7 42-1 41.5-14.2h.8v22.9h-.8c0-7.3-6-7.8-22.7-7.8H25.3c-16.7 0-22.7.5-22.7 7.8h-.9zm0-77.9v-60.5h11.5v.8C2.7 958.6 2 988.8 2.6 1004H39c-9.5-10 .9-20.3 1.3-30.3 0-3.2-1.9-6.2-4.8-6.2v-.9c5 0 9.3 4.2 9.3 10.8 0 10.4-7.3 14.7-7.5 20.7a7.2 7.2 0 0 0 3 5.9h45.2c-.5-10.8 2.3-42.8-13.1-44.7v-.8h14v60.5h-1c0-7.2-6-7.7-22.6-7.7H25.3c-16.7 0-22.7.5-22.7 7.7zm0-88.4h.9c0 7.3 6 7.8 22.7 7.8h60.2c-.5-11 2.4-42.5-13.1-44.6v-.8h14v60.4h-1c0-7.2-6-7.8-22.6-7.8H25.3c-16.7 0-22.7.6-22.7 7.8h-.9zM34 854c-1.6 0-2.3.9-2.3 2 0 4 8.9 6.6 8.9 11.4 0 2.4-2.3 2.8-4.5 2L0 855.7v-.8l71.4-27c9.3-3.8 14-6.5 14-11.7h.8V844h-.8c0-12-6.9-11.5-15.4-8.3l-27.7 10.5c49.9-7.2 58.2 40.3 29.1 41.6-20.8 0-28.7-33.8-37.5-33.8zm50 13.3c-.7-20-31.4-23.7-47.2-19l-27 10.2 26 9.7c2.9 1.1 4 .5 4-.9 0-3.9-9-7-9-11.5 0-1.6 1.1-2.8 3.3-2.8 11.4 0 15 27.6 35.8 27.6 8 0 14-5 14-13.3zM1.6 799 74 751.6c-17.2.6-72.1-4.4-71.4 14.3h-.9V743h.9c0 7.3 6 7.8 22.7 7.8H88c1.4 1.5-81.5 53.5-81.5 54.4 16.8-1 79.9 5.5 79-14.2h.8v22.8h-.8c0-7.3-6-7.8-22.7-7.8H25.3c-16.7 0-22.7.5-22.7 7.8h-.9zm0-61v-23h.9c0 7.3 6 7.8 22.7 7.8h37.5c16.7 0 22.7-.5 22.7-7.8h.8v23h-.8c0-7.2-6-7.7-22.7-7.7H25.3c-16.7 0-22.7.5-22.7 7.7zm0-28v-60.5h11.5v.8C2.7 649.6 2 679.8 2.6 695H39c-9.5-10 .9-20.3 1.3-30.3 0-3.2-1.9-6.2-4.8-6.2v-.9c5 0 9.3 4.1 9.3 10.8 0 10.3-7.3 14.7-7.5 20.7a7.2 7.2 0 0 0 3 5.9h45.2c-.5-10.8 2.3-42.8-13.1-44.7v-.8h14V710h-1c0-7.2-6-7.7-22.6-7.7H25.3c-16.7 0-22.7.5-22.7 7.7zm0-95.2c.6-12.3-1.2-22.7-1.6-35.3 1.2-46.3 70.6-33 49 20.3h13.7c16.7 0 22.7-.5 22.7-7.7h.8v22.7h-.8c0-7.3-6-7.8-22.7-7.8H25.3c-16.7 0-22.7.5-22.7 7.8zM51.4 582c-1.5-36.3-64.6-30-47.5 18h44.4a48.4 48.4 0 0 0 3-18zM34 522.7c-1.6 0-2.3 1-2.3 2 0 4.1 8.9 6.6 8.9 11.5 0 2.3-2.3 2.8-4.5 2L0 524.4v-.9l71.4-27c9.3-3.7 14-6.4 14-11.6h.8v27.7h-.8c0-11.9-6.9-11.5-15.4-8.2l-27.7 10.4c49.9-7.2 58.2 40.4 29.1 41.6-20.8 0-28.7-33.8-37.5-33.8zm50 13.4c-.7-20-31.4-23.8-47.2-19l-27 10.2 26 9.7c2.9 1.1 4 .4 4-1 0-3.8-9-7-9-11.4 0-1.6 1.1-2.8 3.3-2.8 11.4 0 15 27.6 35.8 27.6 8 0 14-5 14-13.3zM1.6 434.3h11.5v.9c-6-.5-10.5 10.5-10.6 25.1h60.2c16.7 0 22.7.2 22.7-7.1h.8v22h-.8c0-7.2-6-7.7-22.7-7.7H2.6C2.6 482 7 493 13.2 492.6v.9H1.7zm0-64.1h11.5v.8c-6-.5-10.5 10.5-10.6 25.1h60.2c16.7 0 22.7.2 22.7-7h.8v22h-.8c0-7.3-6-7.8-22.7-7.8H2.6C2.6 418 7 429 13.2 428.4v.9H1.7zm0-5.1v-60.6h11.5v.9C2.7 304.7 2 334.9 2.6 350H39c-9.5-10 .9-20.2 1.3-30.2 0-3.3-1.9-6.3-4.8-6.3v-.8c5 0 9.3 4 9.3 10.8 0 10.3-7.3 14.6-7.5 20.6a7.2 7.2 0 0 0 3 6h45.2c-.5-10.9 2.3-42.9-13.1-44.7v-.9h14v60.6h-1c0-7.3-6-7.8-22.6-7.8H25.3c-16.7 0-22.7.5-22.7 7.8zm83.8-65.6c0-7.3-6-7.8-22.7-7.8H25.3c-16.7 0-22.7.5-22.7 7.8h-.9C2.3 287 .5 276.7.1 264.2c-1.9-35 44.8-38.2 45.8-3.9 0 8-5.4 13.4-5.4 17 0 1 .2 2.4 2.2 2.4 5.5 0 6.7-17.9 17.3-24.7 10.4-6.7 25.5-14.6 25.5-24.2h.8c0 20.2 3.3 13-25.4 32.5-12.3 8.2-12.6 17.2-18.4 17.2a2.7 2.7 0 0 1-2.9-3c0-5 4.8-8.8 4.8-16.7-2.2-28-56.2-24-40.5 23.7h58.9c16.7 0 22.7-.5 22.7-7.8h.8v22.8zM0 192.9a71 71 0 0 1 3.8-24.1h11.4v.8S1 174.8 1 193c0 15.7 9.5 24.4 19 24.4 23 0 14.9-53.5 44.5-53.5 11.7 0 23.4 12.2 23.4 31.7a48 48 0 0 1-10.3 27.3H66.4c-1-1.5 20.1-10.9 20-32 0-12.4-9-22-18.4-22-25.4 0-18.2 54.4-46 54.4-11.7 0-22-10.8-22-30.3zm44-39.2c-58.2-.2-58.2-75.1 0-75.3 58 .2 58 75 0 75.3zm0-7.7c56.6-.5 56.6-59.4 0-60-57-.3-57 60.4 0 60zM1.6 56 74 8.6C56.8 9.2 1.9 4.2 2.6 22.8h-.9V0h.9c0 7.3 6 7.8 22.7 7.8H88C89.4 9.3 6.5 61.3 6.5 62.2c16.8-1 79.9 5.5 79-14.3h.8v22.9h-.8c0-7.3-6-7.8-22.7-7.8H25.3c-16.7 0-22.7.5-22.7 7.8h-.9z" />
</svg></a></div>
<div class="content" />
</div>

两个班"开了门";和";closed"将设置不透明度。
transition将改变过渡(衰落)速度。

.stickyMPlogo {
fill: #07372F;
transition: 1s;
}
.closed{
opacity:0;
visibility:hidden;
}
.opened{
opacity:1;
visibility:visible;
}   

，并通过hasClass()方法指示滚动条上检查的当前状态

Answer 2

你可以使用animate来显示或隐藏，因为FadeOut/FadeIn方法会立即从其位置移除/添加元素，而animate也会将其放置的位置动画化。看看下面是否适合你!

var status_1 = "closed";
$(window).scroll(function() {
var scrollposition = $(this).scrollTop();
if ((scrollposition > 800) && (status_1 == "closed")) {
$('.verticallogoFixed .stickyMPlogo').animate({opacity:1},1000);
status_1 = "open";
}
if ((scrollposition < 800) && (status_1 == "open")) {
$('.verticallogoFixed .stickyMPlogo').animate({opacity:0},1000);
status_1 = "closed";
}
});

.verticallogoFixed {
width: 5vh;
height: 80vh;
position: fixed;
top: 50%;
transform: translatey(-50%);
left: 2.25em;
z-index: 700;
margin: 0;
}
.verticallogoFixed .stickyMPlogo {
position: absolute;
top: 50%;
transform: translatey(-50%);
/* display: none; */
margin: 0;
}
.stickyMPlogo {
fill: #07372F;
transition: 0.3s;
}
.stickyMPlogo:hover {
fill: #D5E900;
}
.svgLogo a {
overflow: hidden;
padding-left: 0.1vw;
padding-right: 0.1vw;
}
.containerDemo {
height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="containerDemo">
<div class="verticallogoFixed">
<a href="http://melanie-patterson.com/" class="svgLogo">
<svg class="stickyMPlogo" 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 class="content">
</div>
</div>

Answer 3

可以添加到svg

style="display:none"

或添加一个javascript隐藏SVG在启动后的var status_1声明

if (($(this).scrollTop() < 800) && (status_1 == "closed")) {
$('.stickyMPlogo').fadeOut(1000);
status_1 = "closed";
}

这里还有一个jsFiddle