jQuery ScrollSpy僅針對部分滾動部分突出顯示

Question

當id選擇的<div>當前滾動到某個導航鏈接時，我正在使用jQuery ScrollSpy將.underlined類應用於某些導航鏈接。我目前使用的代碼不適用於後面的兩個部分，而它爲其工作的第一部分僅適用於#tenantsandowners_link的.underlined類，僅適用於#tenantsandownersdiv的一小部分。

<script type='text/javascript'> 
    $(document).ready(function() { 
      $('#tenantsandowners').scrollspy({ 
       min: $('#tenantsandowners').offset().top, 
       onEnter: function(element, position) { 
        $("#tenantsandowners_link").addClass('underlined'); 
       }, 
       onLeave: function(element, position) { 
        $("#tenantsandowners_link").removeClass('underlined'); 
       } 
      }); 
      $('#payment').scrollspy({ 
       min: $('#payment').offset().top, 
       onEnter: function(element, position) { 
        $("#payment_link").addClass('underlined'); 
       }, 
       onLeave: function(element, position) { 
        $("#payment_link").removeClass('underlined'); 
       } 
      }); 
      $('#paymentpage').scrollspy({ 
       min: $('#paymentpage').offset().top, 
       onEnter: function(element, position) { 
        $("#paymentpage_link").addClass('underlined'); 
       }, 
       onLeave: function(element, position) { 
        $("#paymentpage_link").removeClass('underlined'); 
       } 
      }); 
     }); 
</script> 

下面是相關的標記：

<div class="pull-right interlinks"> 
    <a href="#tenantsandowners" id="tenantsandowners_link" class="interlink">Tenants & Property Owners</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <a href="#payment" id="payment_link" class="interlink">Payment Options</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    <a href="#paymentpage" id="paymentpage_link" class="interlink">Personalised Payment Page</a> 
</div> 

<div id="tenantsandowners"> 
    <div class="container"> 
     <center><h2>Tenants and Property Owners</h2></center> 
     <br> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <img style="margin-bottom:-30px;" src="/assets/img/businessman.jpg" width="100%" /> 
      </div> 
      <div class="col-sm-6"> 
       <br> 
       <ul class="lead fa-ul"> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Pay and receive your Rent and Maintenance charges</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Instant or Schedule Payment</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Multiple Payment options with different currencies</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Pay from around the world</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Have fastest settlements</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> All in single account</li> 
       </ul> 
       <a href="/signup/" class="btn btn-info btn-lg btn-raised">GET STARTED NOW</a> 
      </div> 
     </div> 
     <br><br> 
    </div> 
</div> 
<div id="payment"> 
    <div class="container"> 
     <center><h2>Payment Options</h2></center> 
     <br> 
     <div class="row" id=""> 
      <div class="col-md-7"> 
       <br> 
       <br> 
       <br> 
       <br> 
       <ul class="fa-ul lead pull-right"> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Domestic & International Payment Option</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Highly Secured Environment</li> 
        <li style="padding-bottom: 8px;"><i class="fa-li fa fa-check"></i> Multiple Payment Gateways</li> 
       </ul> 
       <br> 
       <span class="well lead hidden-xs hidden-sm pull-right" style="color:black;"> 
        Credit Card/Debit Card/Net Banking/PayPal 
       </span> 
       <span class="well hidden-lg hidden-md pull-right" style="color:black;"> 
        Credit Card/Debit Card/Net Banking/PayPal 
       </span> 
      </div> 
      <div class="col-md-5"> 
       <div class="text-center"> 
        <img class="paymentimage" src="assets/img/visa.png" /><br> 
        <img class="paymentimage" src="assets/img/mastercard.png" /><br> 
        <img class="paymentimage" src="assets/img/maestro.png" /><br> 
        <img class="paymentimage" src="assets/img/amex.png" /><br> 
        <img class="paymentimage" src="assets/img/paypal.png" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div id="paymentpage"> 
    <div class="container"> 
     <center><h2>Personalised Payment Page</h2></center> 
     <br> 
     <div class="row" id=""> 
      <div class="col-sm-6"> 
       <center> 
        <img src="/assets/img/iphone.png" /> 
       </center> 
      </div> 
      <div class="col-sm-6"> 
       <br> 
       <p class="lead">Create in 2 Minutes</p> 
       <p class="lead">Property Owners, Builders, Owners Associations<br>can create your own payment collection page to<br>receive the rent and maintenance charges.</p> 
       <br> 
       <p class="lead">Use your own Logo, Company Name and make<br> your personalised one stop instant payment page<br>with multiple payment gateways. <a href="/personalised-payment-page/">Full Benefits</a></p> 
       <div style="position: absolute; text-align:center;"> 
        <a href="/personalised-payment-page/" class="btn btn-info btn-lg btn-raised" style="max-width: 300px !important;">CREATE YOURS NOW</a><br> 
        <b style="color: #388e3c;">(FREE - LIMITED PERIOD)</b> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

如何解決這個問題？

Answer 1

我認爲你的問題是由於使用多個scrollspy實例。

作者網站上的任何示例似乎都沒有使用多個實例，而我之前也看過類似的問題。

我解決了這個問題，只使用了一個scrollspy實例，並將腳本更改爲主要動態。

這裏是一個小提琴 - 我包括jQuery的滾動直接在頁面上的插件讓你的JavaScript代碼行開始：100（我也留下了一些意見，所以你可以用它玩）：

http://jsfiddle.net/16m79c35/

（撥弄填充：http://jsfiddle.net/7q26hptu/）

（撥弄填充和固定報頭：http://jsfiddle.net/05akLpj6/）

我在作者網站上使用了this example，並對其進行編輯以滿足您的需求。

讓我知道如果這能解決你的問題:)

---

注：該腳本可以進一步從您的內容通過更換上線的靜態ID選擇分離：一類106 $('#tenantsandowners, #payment, #paymentpage')說$('.scrollspy')和添加這個類與前面提到的div元素一起使用它們的ID。我沒有測試過，但應該可以正常工作。