Question

我需要前往与用户滚动，但只在两点之间。因此，从其与用户的起始位置滚动到某个位置（在联系我们容器上方），然后向上返回用户。

这是当前使用的代码，这允许标题按需要滚动到某个点，但是当用户向上滚动时不会向上滚动。

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

此答案的所有内容均来自帖子here中的@MicronXD。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使元素在两点之间滚动

1 个答案: