Scrollverhalten

[Mario]

Hallo Tüftler,

Ich suche ein "Javascript" oder "Jquery" mit dem man für einen bestimmten Scrollbereich langsam scrollt oder das scrollen pausiert. Zum Beispiel 2 bis 300 Pixel.

Das ganze sollte sich so verhalten:

• Der 1. Pixel wird normal gescrollt.
  
• Wird weiter gescrollt (im Beispiel: 2 bis 300 Pixel) wird langsam oder gar nicht gescrollt.
  
• Ab 301 Pixel wird normal weiter gescrollt.
  
• Noch besser wäre wenn man anstatt Pixel den Wert VH verwenden könnte.
  

Das ganze möchte ich hierfür verwenden: LINK

So sieht der Code jetzt aus:

Code:

<style>
.wzphdov_outer {
  position: relative;
  width: 100%;
  background-image: url("https://www.zella.de/media/images/probstei-zella-1920x800.jpg");
  background-color: #cccccc;
  height: calc(100vh);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.wzphdov_image {
  display: block;
  width: 100%;
  height: auto;
}
 
.wzphdov_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .8s ease;
  background-color: rgba(0,0,0,0.5);
    opacity: 1;
}

.wzphdov_text {
  color: white;
  font-size: 42px;
  font-weight: 900;
  position: absolute;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  transition: .8s ease;
}
</style>


<div class="wzphdov_outer">
    <div class="wzphdov_overlay"></div>
    <div class="wzphdov_text">HALLO Freunde</div>
</div>


<script>
jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
/*CSS ab Scrollposition 1 Pixel*/
        if(jQuery(this).scrollTop()>=1) {
        jQuery('.wzphdov_overlay').attr('style','height:0;');
            jQuery('.wzphdov_text').attr('style','top:40%;');
    } 
/*CSS wen wieder nach oben gescrollt*/
        else if (jQuery(this).scrollTop()<1) {
        jQuery('.wzphdov_overlay').attr('style','height:100%;');
            jQuery('.wzphdov_text').attr('style','top:80%;');
        }
    })
})
</script>