user3458514 user3458514 - 6 months ago 67
jQuery Question

scroll spy not working on chrome

I have a

div
inside it different
div
s containing each section with unique ids as follows:

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


So want to implement "Scroll spy" of bootstrap using jquery. I am using following code in js:

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


it is working on Firefox but not working on Chrome. Please suggest what could be the reason even I am not getting any error.

Answer

Can you please check this its working in 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>