Home > database >  DIV fade in onscroll with JQuery but without triggering on each pixel
DIV fade in onscroll with JQuery but without triggering on each pixel

Time：07-06

I have an SVG inside a DIV that is supposed to start at 0% opacity and then fade in to 100% via jQuery when I scroll down to 800px. Currently, it's:

  1. Loading at full opacity (instead of 0%) before fading out and back in again and
  2. Firing repeatedly (ex. fade in on pixel 800, and again at 801, 802, etc.).

How would I fix this to only fire once?

Edit: I've adapted code that Johannes posted and replaced it below. Issue 2 is now resolved but issue 1 still remains.

$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 >
  <div >
    <a href="http://melanie-patterson.com/" >
      <svg  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 >
  </div>
</div>

revised jsFiddle, original version jsFiddle

Thanks!

CodePudding user response：

you can add to svg

style="display:none"

or add a javascript for hide the svg at the startup after var status_1 declaration

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

Also here is a jsFiddle

CodePudding user response：

You can use animate to show or hide as FadeOut/FadeIn method immediately removes/adds element from its place, while animate will also animate the place it is placed in. See if below works for you!

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 >
  <div >
    <a href="http://melanie-patterson.com/" >
      <svg  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 >
  </div>
</div>

Page link：https//www.codepudding.com/database/466306.html

Prev:Adding animation on my svg, it changes its position
Next:how can i extract a specific element from the html
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding