I am trying to add and remove a class based on vertical scroll (to the navbar) but there seems to be no effect.
I want the navbar to change background color on scroll and I cant understand why it has not effect.
I have tried adding just css using $(element).css but that doesnt seem to be making a difference either
Link: https://jsfiddle.net/r4Lxvqps/
HTML:
<!DOCTYPE html>
<title>A</title>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt=""/>
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
</body>
CSS:
* {
padding: 0px;
margin:0 auto;
-webkit-transition: all .2s ease-in-out;
}
html, body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin:0px;
}
.container {
position:relative;
height: 100%;
}
nav {
padding: 5px 0px;
position:fixed;
width: 100%;
top:0;
z-index: 9999;
color:black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin:0 15px;
}
nav a {
text-decoration: none;
color:white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color:white;
color:black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color:black;
min-height: 100%;
position:relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float:left;
width: 100%;
color:white;
}
.about, .contact, .portfolio {
min-height: 100%;
}
section {
float:left;
width: 48%;
position:relative;
text-align: center;
}
aside {
float:right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
Checks if offset is > 50 and then should add css (color:black)
JQuery:
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop;
if (scroll_offset > 50) {
$(".nav").css("color", "black");
}
});
});
var scroll_offset = $(window).scrollTop();
$.fn.scrollTop is a function. You forgot to invoke it.
Also can try this:
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$(".nav ul li a").css("color", "black");
} else {
$(".nav ul li a").css("color", "white");
}
});
JSFiddle
Invoke the scrollTop function (scrollTop())
Fix the selector: nav a instead of .nav
Add else statement to restore original color
jsFiddle demo
$(document).ready(function() {
$(window).scroll(function() {
var scroll_offset = $(window).scrollTop();
//alert(scroll_offset);
if (scroll_offset > 50) {
$("nav a").css("color", "black");
} else {
$("nav a").css("color", "white");
}
});
});
* {
padding: 0px;
margin: 0 auto;
-webkit-transition: all .2s ease-in-out;
}
html,
body {
height: 100%;
font-family: 'TitilliumWeb-Regular', 'sans-serif';
}
body {
min-height: 100% !important;
}
h1 {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
height: 100%;
}
nav {
padding: 5px 0px;
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
color: black;
}
nav > ul {
text-align: center;
padding: 5px 0px;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
margin: 0 15px;
}
nav a {
text-decoration: none;
color: white;
display: block;
}
nav li a:not(#logo) {
padding: 10px 18px;
}
nav li:not(#logo) a {
opacity: .7;
}
nav li:not(#logo) a:hover {
opacity: 1;
}
#logo a {
font-size: 30px;
}
.scrolled {
background-color: white;
color: black !important;
}
/** Home Page **/
.home {
vertical-align: top;
background-color: #38A5DB;
color: black;
min-height: 100%;
position: relative;
}
.home > .container {
top: 85px;
padding: 50px 0px;
float: left;
width: 100%;
color: white;
}
.about,
.contact,
.portfolio {
min-height: 100%;
}
section {
float: left;
width: 48%;
position: relative;
text-align: center;
}
aside {
float: right;
width: 50%;
}
aside > img {
width: 80%;
}
/** About Me **/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<nav class="nav">
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li id="logo">
Arshdeep
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div class="home">
<div class="container">
<section>
</section>
<aside>
<img src="assets/images/imac.png" alt="" />
</aside>
</div>
</div>
<div class="about">
<div class="container">
</div>
</div>
<div class="portfolio">
<div class="container">
</div>
</div>
<div class="contact">
<div class="container">
</div>
</div>
</div>
Related
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
I am making a slider with control and indicators. I am stuck in how to make the indicators linking with the slider itself. I search a lot of keywords, but none of the answers can help me out :(
Trying to make it “Click on indicators > remove nearby active class > add active class to this > slider div match the order of the indicators div list)
$('.carousel-indicators > div').on('click', function(){
$(".carousel-indicators > div").something match the({
'order of the': ($(".slider-inner > div").slider list() + 'order')
});
$(".carousel-indicators > div").closest('div').removeClass('active');
$(this).addClass('active');
});
.slider-inner{
width:200px;
height:200px;
position:relative;
overflow:hidden;
float:left;
padding:3px;
border:#666 solid 1px;
}
.slider-inner > div{
display:none;
width:200px;
height:200px;
}
.slider-inner .active{
display:inline-block;
cursor: pointer;
}
.carousel-indicators{
width: 500px;
float: left;
}
.carousel-indicators > div{
float: left;
width: 30px;
height: 8px;
background-color: #D8D8D8;
margin-right: 30px;
cursor: pointer;
}
.carousel-indicators .active{
background-color: #FF6600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider-outer">
<div class="slider-inner">
<div id="item" class="active" ><p>#1 </p></div>
<div id="item" ><p>#2 </p></div>
<div id="item" ><p>#3 </p></div>
</div>
<div class="carousel-indicators">
<div class="active"></div>
<div></div>
<div></div>
</div>
</div>
You can add data attributes to the div elements and target in the JS
$('#slider-indicator > li').on('click', function() {
var slideNumber = $(this).data('slide');
var slides = $('#slider > div');
var indicators = $('#slider-indicator > li');
// look for slide with same data-slide as the clicked li
for (var i = 0; i < slides.length; i++) {
if (i === slideNumber) {
$(slides[i]).addClass('active');
$(indicators[i]).addClass('active');
} else {
$(slides[i]).removeClass('active');
$(indicators[i]).removeClass('active');
}
}
});
#slider {
margin: 0 0 15px;
padding: 0;
width: 100%;
height: 30vw;
position: relative;
overflow: hidden;
}
#slider div {
margin: 0;
width: 100%;
height: 30vw;
position: absolute;
top: 0;
left: 100%;
background: green;
transition: left 0.4s linear;
color: white;
text-align: center;
padding: 10vw 0;
font-size: 40px;
}
#slider div:nth-child(2n) {
background: blue;
}
#slider div.active {
left: 0;
}
ul {
margin: 0 auto;
padding: 0;
width: 100%;
list-style: none;
color: white;
text-align: center;
font-size: 12px;
}
ul li {
margin: 0 16px;
padding: 8px 12px;
text-align: center;
background: grey;
display: inline-block;
cursor: pointer;
border-radius: 100%;
}
ul li.active {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
<div class="active">Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
<ul id="slider-indicator">
<li data-slide="0" class="active">1</li>
<li data-slide="1">2</li>
<li data-slide="2">3</li>
</ul>
My objective is to have a single-page website. My current issue is with the nav bar at the top of the page. When I click on one of the links in my nav list, it takes me down the page, but it keeps overshooting.
For example, if I click on my second nav li it takes me down the page, but ends up beneath the text in that div. It's the same with the third and fourth pages: the page scrolls down just barely beyond where I want it to end up, i.e., perfectly in line with the start of the title of each page.
HTML:
<body>
<div id="home"> <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->
<div id="wrapper">
<header>
<h1>Pretend Restaurant</h1>
<nav class="nav">
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
<div id="snow"></div>
</header>
<main>
<div id="page1">
<h2 class="category">Welcome to Snow Bar</h2>
<p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>
</div>
<div id="page2">
<a id="menu" class="smooth"></a>
<h2>Menu</h2>
<h4>Recipes</h4>
<p>list of recipes</p>
</div>
<div id="page3">
<a id="aboutus" class="smooth"></a>
<h2>ABOUT US INFO GOES HERE</h2>
</div>
<div id="page4">
<a id="contact" class="smooth"></a>
<h2>Contact and Location</h2>
<p>Contact info goes here</p>
</div>
<div id="page5">
<a id="social" class="smooth"></a>
<h2>Social media information here</h2>
</div>
</div>
</body>
</main>
CSS
*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
opacity: 0.86;
min-height: 900px;
}
h1 { font-family: Georgia, Times, serif;
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 4em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main { margin-left: 100px;
padding-bottom: 100px;
}
.header{ background-color: #000066;
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
box-sizing: border-box;
}
li {
display: inline-block;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
position: sticky;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
transition: 0.3s;
}
nav ul {
list-style: none;
width: 100%;
text-align: center;
display:inline-block;
}
nav a{text-decoration: none;
width: 100%}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
.category {
font-weight: bold;
background-color: #FFFFFF;
color: darkcyan;
text-align: center;
font-size: 50px;
padding-right: 50px;
padding-left:0;
}
#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}
jQuery
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
That's exactly how HTML navigation works. You should use javascript to scroll to the right position. The formula will be like: parent.scrollTop = destination.offsetTop - nav.style.height)
$('.nav a').click(function(e) {
e.preventDefault();
var $scrooll_to_id = $(this.getAttribute('href'));
$('html').stop(true).animate({
scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
});
});
Here a fiddle: https://jsfiddle.net/sjquno0r/1/
I have a header with a logo on the left, then a nav on the bottom. I'd like the nav to be horizontally centered with the logo, but bottom and padding-bottom isn't working. I changed the image to text and then I could do everything, but with the image it just doesn't work.
HTML
<header class="cf">
<div id="nav">
<img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img>
<div id="nav-list">
<ul id="list">
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
<li>ROSTER</li>
</ul>
</div>
</div>
</header>
<section class="section one">
<h2>One</h2>
</section>
<section class="section two">
<h2>Two</h2>
</section>
<section class="section three">
<h2>Three</h2>
</section>
<section class="section four">
<h2>Four</h2>
</section>
CSS
/* Body */
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
line-height: 1.4em;
color: #222;
font-family: 'Raleway', sans-serif;
}
/* Header */
/* Shrinking */
/* ClearFix */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* Header Styles */
header {
width: 100%;
height: 100px;
background: #02236a;
position: fixed;
z-index: 2;
box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}
.small {
height: 80px;
}
.small .logo {
width: 240px;
height: 80px;
}
.nav {
width: 80%;
}
/* Transitions */
header, .logo {
-webkit-transition: all 1s;
transition: all 1s;
}
/* Navigation */
ul li {
float: left;
margin-left: 50px;
}
/* Miscellaneous */
a {
text-decoration: none;
}
li {
list-style: none;
}
/* Delete */
.section {
max-width: 100%;
height: 42em;
padding: 10px;
}
.section h2 {
color: #fff;
font-size: 6em;
font-weight: 200;
text-align: center;
padding: 2.5em 0;
}
.one {
background: #6bb6ff;
}
.two {
background: #1E90FF;
}
.three {
background: #8B4789;
}
.four {
background: #872657;
}
JavaScript
$(document).on("scroll", function () {
if ($(document).scrollTop() > 25) {
$(".cf").addClass("small");
} else {
$(".cf").removeClass("small");
}
});
Also, HERE is a demo. Let me know if you need any more information.
Add:
.logo {
float:left;
width: 200px;
}
JSFiddle Demo
You may want to float them or inline them in the same parent div. https://jsfiddle.net/awztqyso/1/
.logo {
float: left;
width: 300px;
height: 100px;
}
.nav-list {
float: left;
padding-top: 45px;
height: 100px;
width: 650px;
}
Notice that you have a lot of IDs but you only define styles under css classes.
try this
<div id="nav">
<div id="logo-box">
<img class="logo" src="HEADER/banner.png" width="300" height="100" alt="Next Gen"></img>
</div>
<div id="nav-list">
<ul id="list">
<li>HOME</li>
<li>GALLERY</li>
<li>ABOUT US</li>
<li>SPONSORS</li>
<li>ROSTER</li>
</ul>
</div>
</div>
and apply someting like this
#nav{height: 100px; width: 100%; }
#logo-box{width: 300px; margin-left: 20px; float:left;}
#nav-list{margin-left: 360px; width:600px;} /*margin-left should be more than the
image-box width + image-box margin-left at least*/
I was make a Jquery function to make the navigation bar stick to the top of the page when scrolled past the header.
To make it look smooth I had to add padding-top:110px to the content div and margin-bottom: -80px to the nav div. Now my links do not work.
Any guesses to why? And how can I fix this to get everything in order?
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
height: 40%;
border: 1px dotted blue;
margin: auto;
}
.nav {
margin-bottom: -80px;
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
position: -webkit-sticky;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: 20%;
display: inline-block;
float: left;
border: 1px dotted green;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
z-index: 100;
border-top: 0;
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
position: relative;
padding-top: 110px;
padding-bottom: 100px;
display: block;
width: 100%;
max-height: 100%;
margin: none;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>
You have overlapping (invisible) elements from your content that covers your links.
The following CSS:
#content{
padding-top: 110px;
}
forces your content to sit on top of your navigation links blocking them from being clicked.
There are several solutions to this. One way to confirm that this is the case is to remove
#content{
padding-top: 110px;
}
and replace it with
#content{
position:relative;
top:110px;
}
A better way to debug the issue is to open Chrome DevTools and inspecting the #content div to see where the box model overlaps your links and adjust accordingly.
I removed the negative margins applied to the main element, to your nav bar, and removed the height of your header. And also some little other things.
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
/* height: 40%; => that makes your header overlapping with your nav bar*/
border: 1px dotted blue;
margin: auto;
}
.nav {
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
/*
the support of position:sticky is bad: http://caniuse.com/#feat=css-sticky
position: -webkit-sticky;
*/
background: rgba( 255,255,255,0.9);
transition: width 0.5s;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: calc(20% - 1px );;
display: inline-block;
float: left;
border: 1px dotted green;
border-right-width: 0;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
border-top: 0;
}
.sticky + #content{
margin-top:80px
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
padding-top:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab <br/><br/><br/><br/><br/><br/>
lhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>