Question

我正在使用jQuery ScrollSpy将.underlined类应用于某些导航链接，当<div>选中的id当前滚动到该问题时。我目前的代码不适用于后两个部分，而它正在使用的第一部分仅将.underlined类应用于#tenantsandowners_link #tenantsandowners的一小部分div 1}} <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>

以下是相关标记：

signif(data, X)

我该如何解决这个问题？

Answer 1

我认为您的问题是由于使用了多个$website = ['name' => 'My website', 'url' => 'myapp.com']; Config::set('website', $website);实例。

作者网站上的所有示例都没有使用多个实例，而且我之前看到过这样的问题。

我通过仅使用Config::get('website.name')的一个实例并将脚本更改为主要动态来解决问题。

这是一个小提琴 - 我直接在页面上包含了jquery-scroll插件，所以你的JavaScript代码从行开始：100 （我还留下了一些评论，所以你可以玩它）：

http://jsfiddle.net/16m79c35/

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

（填充和固定标题：http://jsfiddle.net/05akLpj6/）

我在作者网站上使用this example并根据您的需要对其进行了编辑。

如果这可以解决您的问题，请告诉我:)）

注意：此脚本可以通过替换行上的静态ID选择器来进一步与您的内容分离：106 scrollspy使用类scrollspy并将此类添加到前面提到的{{1}元素和它们的ID一起。我还没有测试过，但它应该可以正常工作。

jQuery ScrollSpy仅突出显示部分滚动部分

1 个答案: