WITHOUT EXTRA PLUGINS
If you want to use only JavaScript then you can go about this solution.
In the code below I have 3 divs and each one has the attribute data-color which contains the color that we want to have on the background when the user is over that div. I made it so the color changes not just when the div is on top of the page but when we are after the 2/3 of the previus div.
When the user scrolls, the function below document.onscroll = function() { is called. This function loops through all the divs (credits: https://stackoverflow.com/a/11291363/7053344) and if (if (scrollTop > curDiv.offsetTop - heightBefore){) the scroll top is bigger than the top of a div (curDiv.offsetTop) minus the 1/3 of the hight of the previous div (heightBefore), then the background is changed according to the div's data-color attribute. The smooth transition for the change of the background color is achieved by this line: transition: background 1.5s; on the CSS.
Also included below are the jumps that you wanted. From the first div there is a link that sends you to the second div etc. You can modify them to fit your navigation bar. In order to understand jumps better you can look here.
JSFiddle: https://jsfiddle.net/0pe5n97z/2/
var test = document.getElementById("test");
document.onscroll = function() {
scrollTop = document.documentElement.scrollTop;
test.innerHTML = scrollTop;
allDivs = document.getElementsByTagName('div');
for( i=0; i< allDivs.length; i++ )
{
curDiv = allDivs[i];
// The code below makes the background color change when the
// scroll top passes the 2/3 of the previous div.
heightBefore = 0;
if (i > 0){
heightBefore = allDivs[i-1].offsetHeight / 3;
}
if (scrollTop > curDiv.offsetTop - heightBefore){
color = curDiv.getAttribute("data-color");
document.body.style.background = color;
}
}
};
body {
background: green;
transition: background 1.5s;
}
<body>
<div style="position:fixed" id="test"></div>
<center>
<div id="div1" data-color="green">
<p>Title goes Here</p>
<a name="green">
<p>Green area</p>
Go To <a href="#red" style="color:red">Red area</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div2" data-color="red">
<a name="red">
<p>Red area</p>
Go To <a href="#blue" style="color:blue">Blue area</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div3" data-color="blue">
<a name="blue">
<p>Blue area</p>
Return To <a href="#green" style="color:green">Green area</a>
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</center>
</body>
UPDATE
In order to make it work on different browsers too, you must add these lines in the CSS:
-webkit-transition: background 1.5s;
-moz-transition: background 1.5s;
-ms-transition: background 1.5s;
-o-transition: background 1.5s;
transition: background 1.5s;
and then change the scrollTop initialization in javascript from this:
scrollTop = document.documentElement.scrollTop;
to this:
scrollTop = window.pageYOffset;
You can test it in this updated JSFiddle.
Sources for this update:
WITH EXTRA PLUGINS
As for your question:
smoothly transition and change background color while scrolling
as I wrote in the comment these sources are very helpful:
The examples in these links use javascript, jquery and other plugins, which I think are neccesary.
As for your question:
when a button is clicked on the navigation bar, navigate to that particular section of the page
this link explains it very well:
Below there is a small example of what you want, that was created by using and combining content from the links above:
$( window ).ready(function() {
var wHeight = $(window).height();
$('.slide')
.height(wHeight)
.scrollie({
scrollOffset : -50,
scrollingInView : function(elem) {
var bgColor = elem.data('background');
$('body').css('background-color', bgColor);
}
});
});
* { box-sizing: border-box }
body {
font-family: 'Coming Soon', cursive;
transition: background 1s ease;
background: #3498db;
}
p {
color: #ecf0f1;
font-size: 2em;
text-align: center;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>
<div class="main-wrapper">
<div class="slide slide-one" data-background="#3498db">
<p>Title</p>
<center>Go To <a href="#green" style="color:green">Green</a>.</center>
</div>
<div class="slide slide-two" data-background="#27ae60">
<a name="green">
<p>Green area</p>
<center>Go To <a href="#red" style="color:red">Red</a>.</center>
</a>
</div>
<div class="slide slide-three" data-background="#e74c3c">
<a name="red">
<p>Red area</p>
<center>Page over. Hope that was helpful :)</center>
</a>
</div>
</div>
Other approaches:
