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。我没有测试过，但应该可以正常工作。