CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Cornelius Labuschagne
Cornelius Labuschagne

Reputation: 161

Update Navbar When User Scrolls

So I am trying to update the Navbar(.nav>li>a) when ever a user scrolls over the section.

My issue that each Nav-Item must have its own color.

I can get the Nav-items to scroll but i cannot get the css .custom_active to apply dynamically for each nav item when the user is scrolling over that section.

This is what i have so far :

JS:

var selector1 = '#menu_item1';
var selector2 = '#menu_item2';
var selector3 = '#menu_item3';
var selector3 = '#menu_item4';

$(document).ready(function() {
  $(".nav li a").removeClass("active");
});

$('.nav li a').on('click', function() {
  var scrollAnchor = $(this).attr('data-scroll'),
    scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
  $('body,html').animate({
    scrollTop: scrollPoint
  }, 500);
  return false;
})


$(window).scroll(function() {
  var windscroll = $(window).scrollTop();
  if (windscroll >= 100) {
    $(selector1).addClass('custom_active1');
    $(selector2).addClass('custom_active2');
    $(selector3).addClass('custom_active3');
    $(selector4).addClass('custom_active4');
    $('.wrapper section').each(function(i) {
      if ($(this).position().top <= windscroll - 20) {
        $('nav a.active').removeClass('active');
        $('nav a').eq(i).addClass('active');
      }
    });

  } else {

    $(selector1).removeClass('custom_active1');
    $(selector2).removeClass('custom_active2');
    $(selector3).removeClass('custom_active3');
    $(selector4).removeClass('custom_active4');
    $('nav a.active').removeClass('active');
    $('nav a:first').addClass('custom_active1');
  }

}).scroll();

CSS:

body {
  background-image: url(https://wallpaperscraft.com/image/blurry_colorful_rainbow_16063_3840x2400.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  max-height: 3000px;
  letter-spacing: 2px !important;
}

@media only screen and (max-width: 1500px) {
  body {
    background-size: auto;
  }
}

@media only screen and (max-width: 770px) {
  .nav>li {
    text-align: center;
  }
}

#background-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

.navbar {
  background: rgba(0, 0, 0, 0.73);
  border-radius: 0px;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.43);
}

.navbar>.container-fluid>.navbar-header>a {
  color: white !important;
}

.nav>li>a {
  color: white !important;
}

.custom-containers {
  width: 100%;
  background: rgba(26, 85, 0, 0.49);
  height: 600px;
  top: 100px;
  position: absolute;
  text-align: center;
  color: white;
  border: 1px white solid;
  box-shadow: 0 0 50px black;
  padding-top: 50px;
}

#section1 {
  text-shadow: 1px 1px 1px black;
}

#section2 {
  background: rgba(85, 0, 82, 0.49);
  top: 1000px;
}

#section3 {
  background: rgba(0, 0, 85, 0.49);
  top: 1900px;
}

#section4 {
  background: rgba(26, 85, 0, 0.49);
  top: 2800px !important;
  -moz-margin-bottom: 100px !important;
}

.custom_active1 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

.custom_active2 {
  background: rgba(250, 144, 246, 0.3);
  transition: all 0.2s;
}

.custom_active3 {
  background: rgba(158, 158, 255, 0.3);
  transition: all 0.2s;
}

.custom_active4 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#section1">Designs by Cornelius</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="menu_item1"><a data-scroll="section1" href="#section1">Home</a></li>
        <li id="menu_item2"><a data-scroll="section2" href="#section2">My Skills</a></li>
        <li id="menu_item3"><a data-scroll="section3" href="#section3">My Gallery</a></li>
        <li id="menu_item4"><a data-scroll="section4" href="#section4">Contact Me</a></li>
      </ul>
    </div>
  </div>
</nav>

<section class="container-fluid custom-containers" id="section1" data-anchor="section1">
  <h1>Hi There,</h1>
  <br><br>
  <h1>My name is <b>Cornelius</b>, I am :</h1>
  <br><br>
  <h1>
    <p class="typewrite" data-period="2000" data-type='[ "A Front End Dev.", "Creative.", "Inspired.", "Passionate about development.", "Human." ]'>
      <span class="wrap"></span>
    </p>
  </h1>
  <span class="scroll-text">
  Scroll
  <br>
  <i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
  </span>
</section>

<section class="container-fluid custom-containers" id="section2" data-anchor="section2">
  <h1>My Skills</h1>
  <span class="scroll-text">
  Scroll
  <br>
  <i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
  </span>
</section>

<section class="container-fluid custom-containers" id="section3" data-anchor="section3">
  <h1>My Gallery</h1>
  <span class="scroll-text">
  Scroll
  <br>
  <i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
  </span>
</section>

<section class="container-fluid custom-containers" id="section4" data-anchor="section4">
  <h1>Contact Me</h1>
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>

So each individual Nav-Item must update with the same background color as the section that is on the screen.

When the user scrolls then the navbar must dynamically update to whatever ever section the user is on.

im not sure if that makes sense, but go ahead and ask any qeustions to make life easier, please.

Upvotes: 1

Views: 2070

Answers (1)

Pedram
Pedram

Reputation: 16615

By getting .offset().top of each section, you can do addClass to each nav

var selector1 = '#menu_item1';
var selector2 = '#menu_item2';
var selector3 = '#menu_item3';
var selector4 = '#menu_item4';

$(document).ready(function() {
  $(".nav li a").removeClass("active");
});

$('.nav li a').on('click', function() {
  var scrollAnchor = $(this).attr('data-scroll'),
    scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
  $('body,html').animate({
    scrollTop: scrollPoint
  }, 500);
  return false;
})


$(window).scroll(function() {
  var windscroll = $(window).scrollTop();
  var sec1 = $('#section1').offset().top - 50;
  var sec2 = $('#section2').offset().top - 50;
  var sec3 = $('#section3').offset().top - 50;
  var sec4 = $('#section4').offset().top - 50;

  if (windscroll >= sec1) {
    $(selector1).addClass('custom_active1');
  } // do not remove this class

  if (windscroll >= sec2) {
    $(selector2).addClass('custom_active2');
    
    $(selector1).removeClass('custom_active1');
    $(selector3).removeClass('custom_active3');
    $(selector4).removeClass('custom_active4');
  } else {
    $(selector2).removeClass('custom_active2');
  }

  if (windscroll >= sec3) {
    $(selector3).addClass('custom_active3');
    
    $(selector1).removeClass('custom_active1');
    $(selector2).removeClass('custom_active2');
    $(selector4).removeClass('custom_active4');
  } else {
    $(selector3).removeClass('custom_active3');
  }

  if (windscroll >= sec4) {
    $(selector4).addClass('custom_active4');
    
    $(selector1).removeClass('custom_active1');
    $(selector2).removeClass('custom_active2');
    $(selector3).removeClass('custom_active3');
  } else {
    $(selector4).removeClass('custom_active4');
  }

}).scroll();
body {
  background-image: url(https://wallpaperscraft.com/image/blurry_colorful_rainbow_16063_3840x2400.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  max-height: 3000px;
  letter-spacing: 2px !important;
}

@media only screen and (max-width: 1500px) {
  body {
    background-size: auto;
  }
}

@media only screen and (max-width: 770px) {
  .nav>li {
    text-align: center;
  }
}

#background-overlay {
  background: rgba(0, 0, 0, 0.3) !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

.navbar {
  background: rgba(0, 0, 0, 0.73);
  border-radius: 0px;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.43);
}

.navbar>.container-fluid>.navbar-header>a {
  color: white !important;
}

.nav>li>a {
  color: white !important;
}

.custom-containers {
  width: 100%;
  background: rgba(26, 85, 0, 0.49);
  height: 600px;
  top: 100px;
  position: absolute;
  text-align: center;
  color: white;
  border: 1px white solid;
  box-shadow: 0 0 50px black;
  padding-top: 50px;
}

#section1 {
  text-shadow: 1px 1px 1px black;
}

#section2 {
  background: rgba(85, 0, 82, 0.49);
  top: 1000px;
}

#section3 {
  background: rgba(0, 0, 85, 0.49);
  top: 1900px;
}

#section4 {
  background: rgba(26, 85, 0, 0.49);
  top: 2800px !important;
  -moz-margin-bottom: 100px !important;
}

.custom_active1 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}

.custom_active2 {
  background: rgba(250, 144, 246, 0.3);
  transition: all 0.2s;
}

.custom_active3 {
  background: rgba(158, 158, 255, 0.3);
  transition: all 0.2s;
}

.custom_active4 {
  background: rgba(181, 255, 148, 0.3);
  transition: all 0.2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#section1">Designs by Cornelius</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li id="menu_item1"><a data-scroll="section1" href="#section1">Home</a></li>
        <li id="menu_item2"><a data-scroll="section2" href="#section2">My Skills</a></li>
        <li id="menu_item3"><a data-scroll="section3" href="#section3">My Gallery</a></li>
        <li id="menu_item4"><a data-scroll="section4" href="#section4">Contact Me</a></li>
      </ul>
    </div>
  </div>
</nav>




<section class="container-fluid custom-containers" id="section1" data-anchor="section1">
  <h1>Hi There,</h1>
  <br><br>
  <h1>My name is <b>Cornelius</b>, I am :</h1>
  <br><br>
  <h1>
    <p class="typewrite" data-period="2000" data-type='[ "A Front End Dev.", "Creative.", "Inspired.", "Passionate about development.", "Human." ]'>
      <span class="wrap"></span>
    </p>
  </h1>
  <span class="scroll-text">
		Scroll
		<br>
		<i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
		</span>

</section>




<section class="container-fluid custom-containers" id="section2" data-anchor="section2">
  <h1>My Skills</h1>

  <span class="scroll-text">
		Scroll
		<br>
		<i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
		</span>
</section>




<section class="container-fluid custom-containers" id="section3" data-anchor="section3">
  <h1>My Gallery</h1>

  <span class="scroll-text">
		Scroll
		<br>
		<i class="fa fa-angle-double-down fa-3x" aria-hidden="true"></i>
		</span>
</section>





<section class="container-fluid custom-containers" id="section4" data-anchor="section4">
  <h1>Contact Me</h1>



</section>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>

Edit: Due your fixed nav I added -50 for each offset().top, now looks better.

Upvotes: 2

Related Questions