The bootstrap Navbar is experiencing issues with Bootstrap 4.0.0-alpha.2 as well as scroll spy. I attempted to switch both the script and CSS files with Bootstrap 3.3.7 which worked fine. However, with this version, both the styling of the navbar and the spy scrolling are not functioning properly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<style type="text/css">
body{
position:relative;
}
#home{
margin-top:50px;
}
#home {padding-top:50px;height:500px;color: #fff; background-color: green;}
#one {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#two {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#three {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#two1 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#two2 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-scroll="spy" data-target="#myNavbar" data-offset="10">
<nav class="navbar navbar-inverse navbar-fixed-top" id="myNavbar">
<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 href="#" class="navbar-brand">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class=" nav navbar-nav" >
<li class="active"><a href="#home">Home</a></li>
<li><a href="#one">Section 1</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2<span class="caret"></span></a>
<ul class="dropdown-menu" >
<li><a href="two1">Section 2-1</a></li>
<li><a href="two2">Section 2-2</a></li>
<li><a href="two3">Section 2-3</a></li>
</ul>
</li>
<li><a href="#three">Section 3</a></li>
</ul>
</div>
</div>
</nav>
<div id="home" class="container-fluid">
<h1>Home</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="one" class="container-fluid">
<h1>One</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="two" class="container-fluid">
<h1>two</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="three" class="container-fluid">
<h1>Three</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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script type="text/javascript">
$("body").scrollspy({target:"#myNavbar"});
</script>
</body>
</html>