Question

我的div内有div个不同的<div class="navbar navbar-fixed-top edit-1" id="uniqueID"> <div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class=""><a href="#Contact" data-scroll="">Contact</a></li> <li class="info active"><a href="#infoTab" data-scroll="">Key Information</a></li> <li class="initialHiddenfields" style="display: none;"><a href="#Production1" data-scroll="">Production1</a></li> </ul> </div> </div> </div>，其中包含每个具有唯一ID的部分，如下所示：

$('body').scrollspy({ target: '#uniqueID' });

所以想实施＆＃34; Scroll spy＆＃34;使用jquery的bootstrap。我在js中使用以下代码：

Mon Jun 20 2016 00:00:00 GMT+0530 (India Standard Time)

它正在使用Firefox但不支持Chrome。请提出一个可能的原因，即使我没有收到任何错误。

Answer 1

你需要定位不在id上的类。

$('body').scrollspy({ target: '.navbar' });

Answer 2

请你检查一下它在chrome中的工作情况

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <style>
            body {
            position: relative; 
            }
            #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
            #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
            #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
            #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
            #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
        </style>
    </head>
    <body data-spy="scroll" data-target=".navbar" data-offset="50">
        <nav class="navbar navbar-inverse navbar-fixed-top edit-1" id="uniqueID">
            <div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class=""><a href="#Contact" data-scroll="">Contact</a></li>
                        <li class="info active"><a href="#infoTab" data-scroll="">Key Information</a></li>
                        <li class="initialHiddenfields" style="display: none;"><a href="#infoTab" data-scroll="">Production1</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div id="Contact" class="container-fluid">
            <h1>Section 1</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="infoTab" class="container-fluid">
            <h1>Section 2</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
        <div id="Production1" class="container-fluid">
            <h1>Section 3</h1>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
            <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>
    </body>
</html>

滚动间谍不工作铬

2 个答案: