JSFiddle - React, Tailwind, and code Playground
HTML
<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" style="display:none;">
<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...
CSS
.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;
}
.content{
min-height: 2000px;
}
JavaScript
var status_1 = "closed";
$(window).scroll(function() {
var scrollposition = $(this).scrollTop();
console.log(scrollposition);
if ((scrollposition > 800) && (status_1 == "closed")) {
$('.stickyMPlogo').fadeIn(1000);
status_1 = "open";
}
if ((scrollposition < 800) && (status_1 == "open")) {
$('.stickyMPlogo').fadeOut(1000);
status_1 = "closed";
}
});