Wie ein Element zwischen zwei Punkten scrollen

Question

Ich muss mit dem Benutzer, aber nur zwischen zwei Punkten, um zu blättern. Scrollen Sie also von der Startposition mit dem Benutzer zu einer bestimmten Position (über den Contact-Us-Container) und dann zurück mit dem Benutzer nach oben.

Hier ist der aktuelle Code, der verwendet wird, damit die Überschrift bis zu einem bestimmten Punkt wie gewünscht gescrollt werden kann, jedoch nicht zurückgescrollt wird, wenn der Benutzer hochscrollt.

HTML:

<div id="header" class="row"> 
     <div class="col-sm-5"> 
      <h1 id="scrollwith">Our Services.</h1> 
     </div> 
     <div class="col-sm-6 col-sm-offset-1"> 
      <img src="images/backdroppattern.png" style="width: 100%; height: 3000px;"> 
     </div> 
    </div> 
</div> 

<div id="contact-container"> 

    <div class="row"> 
     <div class="col-sm-12"> 
      <a class="contact-link" href="#"><h2>Contact us &#10132;</h2></a> 
     </div> 
    </div> 

</div> 

JS:

$(document).ready(function(){ 

var windw = this; 

$.fn.followTo = function (pos) { 
    var $this = this, 
     $window = $(windw); 

    $window.scroll(function(e){ 
     if ($window.scrollTop() > pos) { 
      $this.css({ 
       position: 'absolute', 
       top: pos 
      }); 
     } else { 
      $this.css({ 
       position: 'fixed' 
      }); 
     } 
    }); 
}; 

$('#scrollwith').followTo(2700); 

}); 

Answer 1

Alle Gutschriften zu dieser Antwort geht here von der Post @MicronXD.

jQuery.fn.extend({ 
 
    followTo: function(elem, marginTop) { 
 
    var $this = $(this); 
 
    var $initialOffset = $this.offset().top; 
 
    setPosition = function() { 
 
     if ($(window).scrollTop() > $initialOffset) { 
 
     if (elem.offset().top > ($(window).scrollTop() + $this.outerHeight() + marginTop)) { 
 
      $this.css({ 
 
      position: 'fixed', 
 
      top: marginTop 
 
      }); 
 
     } 
 
     if (elem.offset().top <= ($(window).scrollTop() + $this.outerHeight() + marginTop)) { 
 
      $this.css({ 
 
      position: 'absolute', 
 
      top: elem.offset().top - $this.outerHeight() 
 
      }); 
 
     } 
 
     } 
 
     if ($(window).scrollTop() <= $initialOffset) { 
 
     $this.css({ 
 
      position: 'relative', 
 
      top: 0 
 
     }); 
 
     } 
 
    } 
 
    $(window).resize(function() { 
 
     setPosition(); 
 
    }); 
 
    $(window).scroll(function() { 
 
     setPosition(); 
 
    }); 
 
    } 
 
}); 
 

 
$('#scrollwith').followTo($('#contact-container'), 0);

#contact-container { 
 
    background: red; 
 
    height: 900px; 
 
} 
 

 
#scrollwith { 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header" class="row"> 
 
    <div class="col-sm-5"> 
 
    <h1 id="scrollwith">Our Services.</h1> 
 
    </div> 
 
    <div class="col-sm-6 col-sm-offset-1"> 
 
    <img src="images/backdroppattern.png" style="width: 100%; height: 3000px;"> 
 
    </div> 
 
</div> 
 

 

 
<div id="contact-container"> 
 

 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <a class="contact-link" href="#"> 
 
     <h2>Contact us &#10132;</h2> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
</div>