How to make an element scroll between two points [duplicate]

Refresh

November 2018

Views

247 time

2

This question already has an answer here:

I need to heading to scroll with the user, however only between two points. So scroll from its starting position with the user, to a certain position (above the contact us container) and then back with the user up.

Here is the current code used, this allows the heading to scroll until a certain point as required however does not scroll back up when the user scrolls up.

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);

});

1 answers

0

Все кредиты на этот ответ идет в @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>