Dante83/ScrollbarUnderNav.html

## ScrollbarUnderNav.html
<html><head>
		<meta charset="utf-8">
		<!-- <meta http-equiv="refresh" content="10" /> -->
		<title>Sample 3</title>
		<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Poiret+One|Ropa+Sans|Signika" rel="stylesheet">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script type="text/javascript">
    //Get the div with id content-container and set it to the full page height - 100px (the size of your navigation bar)
    $('#content-container').css('height', (window.innerHeight - 100) + "px");
  </script>
	</head>
	<body>
		<div id="bar1" style="bottom: 400px; display: none;">
			<div class="whitetext1">Responsive</div>
		</div>
		<button class="joinnow" onclick="javascript: joinclick();" style="display: none;">JOIN NOW</button>
		<div id="bar2" style="display: none;">
			<div class="blacktext">Stylish</div>
		</div>
		<div id="bar3" style="top: 700px; display: none;">
			<div class="whitetext2">Designs</div>
		</div>
		<div class="topnavbar" style="display: block;">
			<nav>
				<div class="logo">LOGO</div>
				<ul>
					<li><a id="homenav" href="#">Home</a></li>
					<li><a id="aboutnav" href="#about">About</a></li>
					<li><a id="buynav" href="#buy">Buy</a></li>
					<li><a id="contactnav" href="#contact">Contact</a></li>
				</ul>
			</nav>
		</div>
	<div id="content-container" style="overflow-y:scroll;">
		<section class="1">
		<div class="homebg" style="display: block;"></div>
		</section>
			<h1 class="sectiontitle" id="about">About</h1>
			<section class="content1">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet felis leo, eget semper ex imperdiet sed. Proin sit amet nulla sapien. Mauris ullamcorper nec purus in dapibus. Suspendisse potenti. Aenean blandit lacus non sapien euismod ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et risus ornare, consectetur arcu sed, aliquet urna. Fusce nulla lorem, aliquam vitae commodo non, euismod vitae ipsum. Phasellus dictum blandit nisi, sed pellentesque lorem aliquet a. Praesent eu ligula vel diam dictum luctus et vitae quam. Integer interdum, libero eget posuere varius, purus nulla tempus mi, a gravida sapien mi at enim. Donec cursus egestas quam. Fusce nisi diam, auctor id tortor in, feugiat porta orci. Nam ultricies vestibulum enim vel pretium. Praesent bibendum euismod erat et dignissim.</p>
			</section>
	</div>

</body></html>
	<html><head>
	<meta charset="utf-8">
	<!-- <meta http-equiv="refresh" content="10" /> -->
	<title>Sample 3</title>
	<link href="https://fonts.googleapis.com/css?family=Dancing+Script\|Poiret+One\|Ropa+Sans\|Signika" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<script type="text/javascript">
	//Get the div with id content-container and set it to the full page height - 100px (the size of your navigation bar)
	$('#content-container').css('height', (window.innerHeight - 100) + "px");
	</script>
	</head>
	<body>
	<div id="bar1" style="bottom: 400px; display: none;">
	<div class="whitetext1">Responsive</div>
	</div>
	<button class="joinnow" onclick="javascript: joinclick();" style="display: none;">JOIN NOW</button>
	<div id="bar2" style="display: none;">
	<div class="blacktext">Stylish</div>
	</div>
	<div id="bar3" style="top: 700px; display: none;">
	<div class="whitetext2">Designs</div>
	</div>
	<div class="topnavbar" style="display: block;">
	<nav>
	<div class="logo">LOGO</div>
	<ul>
	<li><a id="homenav" href="#">Home</a></li>
	<li><a id="aboutnav" href="#about">About</a></li>
	<li><a id="buynav" href="#buy">Buy</a></li>
	<li><a id="contactnav" href="#contact">Contact</a></li>
	</ul>
	</nav>
	</div>
	<div id="content-container" style="overflow-y:scroll;">
	<section class="1">
	<div class="homebg" style="display: block;"></div>
	</section>
	<h1 class="sectiontitle" id="about">About</h1>
	<section class="content1">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce imperdiet felis leo, eget semper ex imperdiet sed. Proin sit amet nulla sapien. Mauris ullamcorper nec purus in dapibus. Suspendisse potenti. Aenean blandit lacus non sapien euismod ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et risus ornare, consectetur arcu sed, aliquet urna. Fusce nulla lorem, aliquam vitae commodo non, euismod vitae ipsum. Phasellus dictum blandit nisi, sed pellentesque lorem aliquet a. Praesent eu ligula vel diam dictum luctus et vitae quam. Integer interdum, libero eget posuere varius, purus nulla tempus mi, a gravida sapien mi at enim. Donec cursus egestas quam. Fusce nisi diam, auctor id tortor in, feugiat porta orci. Nam ultricies vestibulum enim vel pretium. Praesent bibendum euismod erat et dignissim.</p>
	</section>
	</div>

	</body></html>