Twitter Bootstrap Question posted in

Not being able to scroll, as required, via jQuery – Twitter bootstrap

I am having a bit of a problem involving scrolling in jQuery.
I am designing a portfolio page that tends to have 3 sections – ‘about-section’, ‘portfolio-section’ & ‘contact-section’.
I am wanting to add a class to the navbar-links of the different sections of the page, when the page scrolls to that very section.
The problem arises whilst I try to scroll to the ‘contact-section’ as when I try to do so, the class is added to the ‘contact’ navbar-link in the navbar way before I reach the contact section.

My code is as follows ..

$(document).ready(function(){
  
  $(".navbar-links").click(function(){
    $(".navbar-links").removeClass("active");
    $(this).addClass("active");
  });
  
  var about_offset = $("#about-section").offset().top;
  
  var portfolio_offset = $("#portfolio-section").offset().top;
  
  var contact_offset = $("#contact-section").offset().top;
  
  $(window).scroll(function(){
    $(".navbar-links").removeClass("active");
    var scrolled_offset = $(this).scrollTop();
    if(scrolled_offset>=contact_offset)
      {
        $("#contact_link").addClass("active");
      }
    else if(scrolled_offset>=portfolio_offset)
      {
        $("#portfolio_link").addClass("active");
      }
    else
      {
        $("#about_link").addClass("active");
      }
  });
  
  $("button").click(function(){
    if(!$(this).hasClass("navbar-toggle"))
      window.open($(this).val(),"_blank"); 
  });
                             
  $("#proj_img_1").click(function(){
    window.open("https://codepen.io/iamrkcheers/full/JKbqjw/","_blank");
  });
  
});
.navbar {
  background-color : black;
}

.heading {
  font-family : Sofia;
}

button {
  background : transparent;
  border : 1px solid white;
  padding : 0px;
  margin : 10px;
}

.navbar-brand {
  font-size : 27px;
}

#navbar-menu {
  text-align : center;
}

.navbar-links {
  font-size : 20px;
}

.active {
  border : 1px solid white;
}

a {
  color : green;
}

#about-section {
  background-color : #fd746c;
  color : black;
  z-index : 1;
  position : relative;
  box-shadow : 10px 10px 20px black;
}

.center {
  text-align : center;
}

.content-div {
  text-align : center;
  display : inline-block;
  vertical-align : middle;
  float : none;
}

.content {
  font-family : Lily Script One;
}

i {
  border : 0px;
}

img {
  border : 1px solid black;
  margin : auto;
  top : 0;
  left : 0;
  right : 0;
  bottom : 0;
  box-shadow : 10px 10px 20px black;
}

.project-img {
  max-width : 70%;
  max-height : 70%;
}

#portfolio-section {
  background-color : #904e95;
  color : black;
  position : relative;
  box-shadow : 10px 10px 20px black;
}

#proj_img_div{
  position : relative;
}

#proj_img_1:hover + #img_desc {
  visibility : visible;
  opacity : 1;
}

#proj_img_1:hover {
    opacity : 0.4;
}

#img_desc {
  position : absolute;
  top : 50%;
  left : 0;
  width : 100%;
  text-align : center;
  color : black;
  visibility : hidden;
  opacity : 0;
  transition : opacity .5s, visibility .5s;
}

#contact-section {
  background-color : #4ca1af;
  color : black;
}

.fa {
  padding : 20px;
  font-size : 45px;
  width : 100px;
  text-align : center;
  text-decoration : none;
  background : #2c4762;
  color: white;
  margin : 0px 0px;
  border : 1px solid white;
}

.fa:hover {
    opacity : 0.7;
}

#meta-section {
  background-color : #4ca1af;
  color : black;
  text-align : center;
}

hr {
  border-color : black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="row" id="navbar-section">
      <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10">
        <div class="navbar-header heading">
          <button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"><span class="glyphicon glyphicon-triangle-bottom"></span></button>
          <a href="#" class="navbar-brand">Portfolio Page</a>
        </div>
        <div id="navbar-menu" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right heading">
            <li class="navbar-links active" id="about_link"><a href="#about-section">About</a><li>
            <li class="navbar-links" id="portfolio_link"><a href="#portfolio-section">Portfolio</a><li>
            <li class="navbar-links" id="contact_link"><a href="#contact-section">Contact</a><li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>
<div class="container-fluid" id="scrollable-div">
  <div class="row" id="about-section">
    <br>
    <br>
    <div class="center heading">
      <h1>About</h1>
    </div>
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10">
      <div class="row">
        <div class="col-md-offset-1 col-md-6 col-sm-offset-1 col-sm-6 col-xs-offset-1 col-xs-10 content-div content">
          <h3>Rishabh Kashyap</h3>
          <h3>Full Stack Web Developer</h3>
          <h3>Key Interests - JavaScript & MEAN Stack</h3>
          <h3>Worked as an intern @ Sapient Global Markets</h3>
          <h4><i>"Never be afraid to take risks. If you succeed, you can lead and if you fail, you can guide."</i><h4>
          <h4>- Swami Vivekananda</h4>
          <h3>Indeed. The motto, I try to live by. Professionally, as well as, Personally.</h3>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12 content-div">
          <img class="img-responsive project-img" alt="my image" src="https://lh3.googleusercontent.com/34CJNU0DexpintEhsM5-zcZdT_7mRWVA6dE-7f122WM3xj4xFI0nXYQhXyEG8tyrd4piHPHPGtCNtu_o5vqZ2eFFH2W9YS4ekKCqw7wgZzAjsKD8hdNoV5DrARz7I-BRljjksmdfHxoHaGIgwxcNYRJkEBa2FLIhbluVGZo1qN3zZ1ZJ1WpRU27mBbrCScNzazuOFtY0lOBX4JAKd7yGlC7ILwg4gAy-KsN-ZJz54PoNeCblgrz3jGsF8YvEf5Hc-V3kV8DtrDiKiwTpXPowvrLdldS-rIlOpjq1LrbPVNxWUNB1YieiqOUo1AEVYaS9WxiIFae2etL7Jb4nAW9MkLHE-YvQZ4VVcntRfXS3CBnuoy6EPHu2vfevnNeK9lgANs4rb1MNyMCxOACWmn45_vZKZoPfnmk_cyVzt7m2vFZUXPMdyeSRrViQD9VteriL89XHZlItrlgIhXI1vt5JAASHdOYrNV3CTpWMGPfzQk0BfQbbr2qcxnbgbSyEmK4M1wIloFQ0O_q-MCOdffySKCmct8iHRRrAcG5cWF_ArcX5GptL3tHAQHu9UCyfrjwIyI28NbrgZM0NkxxmpRAV5nRJGQetgxewxGaS2A6xfWnlW8jP-P4z=w479-h638-no?.jpg"/>
        </div>
      </div>
      <br>
    </div>
  </div>
  <div class="row" id="portfolio-section">
    <br>
    <br>
    <div class="center heading">
      <h1>Portfolio</h1>
    </div>
    <div id="proj_img_div" class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10">
      <img id="proj_img_1" class="img-responsive project-img" alt="portfolio page" src="https://lh3.googleusercontent.com/A2SpPv6o-FoZiuunHOW-bedHiyRRX3uQmhTgS9hIEgNeTorRJuycZWVdB0IZkIv80omce-6wP9TvbSYP1BStXBMk_scwves3_rQT14Q6oDJy-S0PlcmEESpDOTJEIBsmi3pihU2J9ZiO6VgzvUq5Be7x1I7XZPMmZwdFN0EMC2B8NDpfFO92m5qSRsIk50seJ_HBf1ear85c8l-ON-MbecU4Slkt67THjHIeZAGSigVmu7lUBrqf7fST-h-vF90RlSKhOVmK73vqr36I98XEVN9opd5HUYOIGbdlNmYhpFS5Ltjex1UY4tP7drLoZPy5zWG0cK1rpUuh7DhLV6o2rj1gTj2smARIIfqjlnf5KWfQNmZYCyPf4Prq2TKc0ijZ-yoyBrfd2dQb295JSaS08v1glC-rbhdsHNHVqIf7fjEC_6iH2k9Co3KG4Kt2CZIWQvZWW9Tz8zBPDbO1rpP0E4O9nmux4_PCW1S0G0AfC6aBpPshGvLLbP1zqAomzBxViRdGZQMh-eSMAVk7cS6GV5TFlqcKOsqHUPa5c58O-Sbzg-WfyczOPyy3ngDGatP5j4bYdZalaVuC06vXHAyqo2w39tGOqQjTa2ABgCWkljuh_Si4=w398-h223-no?.jpg">
      <div id="img_desc"><p><i>A tribute page to Swami Vivekananda using basic HTML & Bootstrap.</i></p></div>
      <br>
    </div>
  </div>
  <div class="row" id="contact-section" style="border : 5px solid red">
    <br>
    <br>
    <div class="center heading">
      <h1>Contact Me</h1>
    </div>
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10">
      <div class="center">
        <h4><i>[email protected]</i></h4>
      </div>
      <br>
      <div class="center">
        <button value="https://www.facebook.com/rishabh.kashyap.940436"><i class="fa fa-facebook"></i></button><br>
        <button value="https://twitter.com/iamrkcheers"><i class="fa fa-twitter"></i></button>
        <button value="https://github.com/iamrkcheers"><i class="fa fa-github"></i></button>
        <button value="https://www.freecodecamp.com/iamrkcheers"><i class="fa fa-free-code-camp"></i></button><br>
        <button value="https://www.linkedin.com/in/rishabh-kashyap-735879117/"><i class="fa fa-linkedin"></i></button>
      </div>
    </div>
  </div>
  <div class="row" id="meta-section">
    <div class="col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10">
      <hr>
      <h5>Written & Coded by</h5>
      <h5><a href="https://github.com/iamrkcheers" target="_blank">Rishabh kashyap</a><h5>
    </div>
  </div>
</div>

The link for my code is ..

https://codepen.io/iamrkcheers/pen/KmxEpw

Any help is appreciated.
Thank You.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Putting the about-offset variable, portfolio-offset variable & contact-offset variable inside the $(window).scroll() function did the trick for me.


  2. 0

    do you need to be something like this?

    https://codepen.io/mkdizajn/pen/awmyoQ?editors=1000

    the only thing that is missing is some more space in the footer,, the page needs to be longer let’s say

    <h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
    Login or Signup to reply.
  3. 0

    Hopefully following script will prevent your problem.

    <script>
$(document).ready(function(){

  $(".navbar-links").click(function(){
    $(".navbar-links").removeClass("active");
    $(this).addClass("active");
  });

    var aChildren = $("nav li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray
    for (var i=0; i < aChildren.length; i++) {    
        var aChild = aChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    } // this for loop fills the aArray with attribute href values
    $(window).scroll(function(){
            var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
            var windowHeight = $(window).height(); // get the height of the window
            var docHeight = $(document).height();

            for (var i=0; i < aArray.length; i++) {
                var theID = aArray[i];
                var divPos = $(theID).offset().top; // get the offset of the div from the top of page
                var divHeight = $(theID).height(); // get the height of the div in question
                if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
                    $("a[href='" + theID + "']").addClass("active");
                } else {
                    $("a[href='" + theID + "']").removeClass("active");
                }
            }

            if(windowPos + windowHeight == docHeight) {
                if (!$("nav li:last-child a").hasClass("active")) {
                    var navActiveCurrent = $(".active").attr("href");
                    $("a[href='" + navActiveCurrent + "']").removeClass("active");
                    $("nav li:last-child a").addClass("active");
                }
            }
        });

  $("button").click(function(){
    if(!$(this).hasClass("navbar-toggle"))
      window.open($(this).val(),"_blank"); 
  });

  $("#proj_img_1").click(function(){
    window.open("https://codepen.io/iamrkcheers/full/JKbqjw/","_blank");
  });

});
</script>

    And one thing you need to do is remove active class from About nav link

    If you need further info then you can look here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search