如何使元素在兩點之間滾動

我需要標題以與用戶一起滾動，但只能在兩點之間滾動。因此，從用戶的起始位置滾動到某個位置（位於與我們聯繫的容器上方），然後與用戶一起返回。如何使元素在兩點之間滾動

這裏是當前使用的代碼，這允許標題滾動，直到需要的某個點但是當用戶向上滾動時不滾動備份。

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

});

來源

2017-04-20 Jordan Wood

所有學分這個答案去從崗位here到@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>

來源

2017-04-20 10:34:53

如何使元素在兩點之間滾動

回答

相關問題