Bootstrap 3 scrollspy not working, codepen

Question

This is my first post here so please don't be mad at me if I'm doing something wrong.

Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.

Is there any good person who can take look into my code?

HTML:

            <div class="container-fluid">
            <nav class="navbar navbar-default navbar-fixed-top">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Patryk Jamróz</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact </a></li>
              </ul>    
          </nav><!-- navbar -->    
            <div data-spy="scroll" data-target="#nav" data-offset="0">        
            <h3 class="text-center" id="about">about</h3>
    <h3 class="text-center" id="projects">projects</h3>
    <h3 class="text-center" id="contact">contact</h3>
</div>

CSS:

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

body {
  position: relative;
}

In codepen settings tab I included:

CSS: bootstrap.min.css

JS: jquery.min.js bootstrap.min.js

Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva

Answer 1

I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:

$('body').scrollspy({ 
  target: '#bs-example-navbar-collapse-1' 
})

$('#scrollDiv').on('activate.bs.scrollspy', function () {
  //Do stuff if there is a new event in scrollspy
})

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
  margin-left: 0;
  margin-right: 0;
}

body {
  position: relative;
}

<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
  
  
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Patryk Jamróz</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#contact">Contact </a></li>
      </ul>    
  </nav><!-- navbar -->
    
    <div>
    
    
<div id="about" class="col-md-12">
    <h3 class="text-center">about</h3>
    
    <div class="row">
      <div class="col-sm-6">
        <img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
      </div>
      <div class="col-sm-6">
        <h4>Mechanical Designer</h4>
        <p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
      <span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
      <span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
      <span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
      <span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
    <span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
        </div>
        </div>
    </div>
</div> <!-- About section -->

  <hr>
<div id="projects" class="col-md-12">
  <h3 class="text-center">projects</h3>

     <div class="row">
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
           1st well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
           2nd well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           3rd well
         </div>
       </div>
     </div> <!-- Projects 1st row -->

    <div class="row">
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           4th well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           5th well
         </div>
       </div>
       <div class="col-sm-4">
         <div class="well">
           <img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
           6th well
         </div>
       </div>
     </div> <!-- Projects 2nd row -->
</div>
<hr>

<div id="contact" class="col-md-12">
  <h3 class="text-center">contact</h3>

<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<a href="mailto:jamroz.patryk@gmail.com"><h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk@gmail.com</h4></a>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">E-mail</span>
  <input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">Name</span>
  <input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="basic-addon1">Message</span>
  <input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
  <span class="input-group-btn">
        <button class="btn btn-default" type="button">Send!</button>
   </span>
</div> <!-- message input -->
</div>

<div class="col-xs-12" style="height:50px;"></div>


<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
    
</div><!-- Container fluid -->

In that way it work! Good luck, bye.

Answer 2

First thing is you need to initiate the body and not a div tag so your body should have the following:

<body data-spy="scroll" data-target=".navbar" data-offset="0">

And not the:

<div data-spy="scroll" data-target="#nav" data-offset="0">

because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.

Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.

Answer 3

u can try whit jquery

    $("#yourtarget").click(function() {
    $('html, body').animate({
        scrollTop: $("#yourDiv").offset().top
    }, 2000);
});