Nav Bar Scrolling Too Far on my page - javascript

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/

Related

How to keep navigation tab remain unchanged

When I click a button on the sidebar, and if the current tab is the second tab the navigation tab is going to display the first tab as the second tab lost the focus. How can I keep the second tab in display while clicking a button on the sidebar?
the code is in jsfiddle
https://jsfiddle.net/98okrj0f/9/
The AngularJs scripts works at my local. Can anyone also tell me how to make it work in jsfiddle?
HTML Code here
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!-- -->
<body ng-app="App" >
<nav>
<ul> <span>My App</span>
<li class="sub">
Version
<ul>
<li class="sub">
V2
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
</ul>
</li>
<li class="sub">
V3
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside class="side" align="left">
<table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
<tr ng-repeat = "table in tables">
<td><button id = "{{table}}" width = "70">{{table}}</button></td>
</tr>
</table>
</aside>
<article class="tabs">
<section id="erd">
<h2>ERD</h2>
<p>This content appears on tab ERD.</p>
</section>
<section id="col">
<h2>Columns</h2>
<p>This content appears on tab Columns.</p>
</section>
<section id="home">
<h2>Home</h2>
<p>This content appears on tab Home. lfkdgl;k lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj dskfj;kj sdfkj fkdj;lfkjsd;lkfj sdkfj ;slkj sdfj;lskjf skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
</section>
</article>
<footer align="bottom">
<span>"Copyright© 2016 </span></span>
</footer>
<script>
var app = angular.module('App', []);
app.controller('TableCtrl', function($scope) {
$scope.tables = ['category','supplier','customer','dept','empl','orders'];
});
app.controller('V2Ctrl', function($scope) {
$scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
CSS code here.
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
text-align: center;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
aside {
display: block;
position: absolute;
width: 80px;
height: 550px;
padding-right: 0;
margin: 0;
overflow: auto;
background-color: lightblue
}
article {
/* position: relative; */
}
article.tabs
{
position: relative;
display: block;
width: 1100px;
height: 500px;
margin: 2em;
margin-left:80px;
background-color: green;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1100px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
left: 254px;
}*/
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
color: #999;
text-align:center
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
the update jsfiddle.
https://jsfiddle.net/98okrj0f/13/

Since nobody answered you're question I will answer this question like I did the previous ones.
The problem was that you weren't closing you <a> tags with </a>. So the html added extra <a> tags with made the left bar also use a href which is used for your tabs. This way it overrided the open tab.
See the new JSfiddle: https://jsfiddle.net/98okrj0f/19/
Here's the code that was making the error's:
<li ng-repeat = "v2 in V2s">{{v2}}</li>
<li ng-repeat = "v3 in V3s">{{v3}}</li>

JQuery - Add/Remove class on vertical scroll has no effect

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>

How to make anchor links in Fixed header with height 200px?

I have a fixed header with height 200px.
How to make anchor links in Fixed header.
Now the menu is not work good.
You can see my code below:
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
/* Mobile Layout: 480px and below. */
body {
background-color: #EEEEEE;
font-family: "Open Sans", Helvetica, "Heiti TC", "Microsoft JhengHei", "Microsoft Yahei", "PMingLiU", sans-serif;
font-size: 100%;
margin-top: 0px;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
padding-left: 1.1375%;
padding-right: 1.1375%;
clear: none;
float: none;
width: auto;
}
#header {
margin-top: 0;
margin-right: auto;
margin-left: auto;
display: block;
width: 100%;
height: 200px;
max-width: 1000px;
position: fixed;
background-color: #FF6600;
}
/* header - navigation */
#subnav {
height: 100%;
margin-right: auto;
width: 100%;
background-color: #1BBC9B;
font-size: 120%;
}
#navmenu ul {
padding: 0;
margin-top: 4px;
margin-right: auto;
margin-left: 0%;
margin-bottom: 0;
width: 650px;
}
#navmenu li {
display: inline;
float: left;
}
#navmenu a {
color: #294C52;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
#navmenu li a {
border-right: 1px solid #294C52;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#navmenu li:last-child a {
border-right: 1px solid #576979;
/* no border on last list item */
}
#navmenu li:first-child a {
background-color: #294C52;
color: #FFFFFF;
}
#navmenu a:hover,
nav a:active {
background-color: #1BBC9B;
color: #FFFFFF;
}
#content {
width: 100%;
max-width: 1000px;
height: 100%;
margin-top: 1px;
}
#section1 {
background-color: #294C52;
width: 100%;
display: block;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 198px;
}
#section2 {
background-color: #EEEEEE;
}
#section3 {
background-color: #EEEEEE;
}
#section4 {
background-color: #EEEEEE;
margin-left: 0;
width: 100%;
float: left;
}
#content-about-org-left {
width: 48.1012%;
background-color: #FFFFFF;
float: left;
clear: none;
}
#content-about-org-centre {
width: 48.1012%;
margin-left: 1.2658%;
clear: none;
background-color: #FFFFFF;
float: right;
}
#content-about-org-right {
background-color: #FFFFFF;
}
#section5 {
background-color: #EEEEEE;
}
/* content - typography */
.content-list {
list-style-type: none;
color: #294C52;
text-indent: -25px;
font-size: 100%;
line-height: 173%;
}
.content-list-bold {
font-weight: bolder;
font-size: 110%;
color: #294C52;
}
.content-title {
background-color: #903233;
color: #FFFFFF;
padding-top: 3px;
}
.content-p-white {
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
padding-top: 0px;
padding-bottom: 0px;
}
.content-p-black {
color: #294C52;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
font-size: 100%;
}
.content-p-black-b {
color: #294C52;
font-weight: bolder;
padding-left: 10px;
font-size: 110%;
}
<div class="gridContainer clearfix">
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li>成立背景
</li>
<li>協會使命
</li>
<li>營運模式
</li>
<li>協會組織
</li>
<li>活動及刊物
</li>
</ul>
</nav>
</header>
<!--end of header-->
<!--start of content-->
<div class="fluid" id="content">
<div id="section1" class="fluid ">
<p class="content-p-white">《2013年香港殘疾人士貧窮情況報告》顯示介乎18至64歲適齡工作的殘疾人士的貧窮率為22.4%，遠較相同年齡群的整體貧窮率10.5%為高。再者，按經濟活動身分劃分，近18萬名的殘疾適齡工作人士當中，只有39.1%有從事經濟活動，遠低於整體人口中同年齡層的72.8%。</p>
<p class="content-p-white">於2013年3月初，一群熱心人士包括郭鍵勳博士、謝俊謙教授及伍杏修先生等有意建立一個各方協作平台，改善殘疾人士的就業困難。</p>
<p class="content-p-white">資訊科技易達協會有限公司 Accessible IT Development Association Limited (AIDA) 於2014年11月正式註冊成立。</p>
<!--<div id="secttion1-bg"></div>-->
</div>
<!--end of section1-->
<div id="section2" class="fluid">
<article>
<h2 class="content-title"> 協會使命</h2>
<p class="content-p-black">資訊科技易達協會是一個社會企業致力提供專業資訊科技服務，同時為嚴重殘疾人士提供培訓及工作機會，讓學員可選擇在家居從事資訊科技相關工作；協會全力推動無障礙軟件開發，協助社會資訊共融。</p>
</article>
</div>
<!--end of section2-->
<div id="section3" class="fluid">
<article>
<h2 class="content-title"> 營運模式</h2>
<figure>
<img src="images/2-about-us_03.jpg" alt="營運模式示意圖" class="alignRight" title="營運模式示意圖" />
</figure>
<p class="content-p-black">全面利用現代通訊科技的便利，解決殘疾人士面對指定工作地點的限制，讓他們可選擇在家居或院舍工作，同時得到必要的護理。AIDA選擇網頁開發作為起步點，由「無障礙學堂」(Barrier-Free School) 及業界專業義工負責培訓學員，讓他們掌握指定技術。</p>
<p class="content-p-black">AIDA會承接工作項目，將項目分拆，然後將組件分配給技術程度不同的學員，並會密切督導整個項目的進行。AIDA已經與本地多間知名網頁開發公司結為合作伙伴，致力確保AIDA的所有服務均符合市場要求。AIDA會以殘疾友善機構的工作項目作為開始，當累積一定成功往績後，會推廣至主流市場。</p>
</article>
</div>
<!--end of section3-->
<div id="section4" class="fluid">
<article>
<h2 class="content-title"> 協會組織</h2>
<div id="content-about-org-left" class="fluid">
<ul class="content-list">
<li class="content-list-bold">名譽贊助人</li>
<li>謝俊謙教授</li>
<li class="content-list-bold">主席</li>
<li>郭鍵勳博士</li>
<li class="content-list-bold">副主席</li>
<li>劉海軍先生</li>
<li class="content-list-bold">義務秘書</li>
<li>伍杏修先生</li>
<li class="content-list-bold">義務司庫</li>
<li>郭皓君女士</li>
<li class="content-list-bold">核數師</li>
<li></li>
<li class="content-list-bold">義務法律顧問</li>
<li>林子絪女士</li>
<li class="content-list-bold">義務總幹事</li>
<li>蘇炳坤先生</li>
<li class="content-list-bold">諮詢委員及指導</li>
<li></li>
</ul>
</div>
<div id="content-about-org-centre" class="fluid">
<ul class="content-list">
<li class="content-list-bold">董事</li>
<li>張健輝先生</li>
<li>郭鍵勳博士</li>
<li>郭皓君女士</li>
<li>劉海軍先生</li>
<li>羅偉祥先生</li>
<li>伍杏修先生</li>
<li>吳家榮博士</li>
<li>蘇炳坤先生</li>
<li>謝俊謙教授</li>
<li>黃婉冰女士</li>
<li>游寶榮先生</li>
</ul>
</div>
<div id="content-about-org-right" class="fluid">
<ul class="content-list">
<li class="content-list-bold">工作團隊</li>
<li>王乃東 王迪清 江啟暉 利詠然 李俊輝</li>
<li>李豪飛 冼永健 何浚彥 施嶸傑 翁文菁</li>
<li>茹文祥 郭寧 章世恒 曾志豪 曾鈴茵</li>
<li>黃新陽 蔡冀逵 鄭建慧 盧兆豐</li>
</ul>
<p>
<img src="images/2-about-us_06.jpg" alt="工作團隊成員相片" title="工作團隊成員相片" />
</p>
</div>
</article>
</div>
<!--end of section4-->
<div id="section5" class="fluid">
<article>
<h2 class="content-title"> 活動及刊物</h2>
<ul class="content-list">
<li class="content-list-bold">新春團拜</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午4:00- 5:30</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">第一次周年大會</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午3:30- 4:00</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">協會發展成長分享會</li>
<li>日期︰2015年2月3日(星期二)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰上午11:00- 下午4:00</li>
<li>內容：</li>
<li>1. Delifrance午膳</li>
<li>2. 匯報協會最新發展，就大家感興趣的事務進行商討</li>
<li>3. IT人Ben Wong 個人經歷分享</li>
<li>4. 參觀香港大學校園或自由活動</li>
</ul>
<hr>
</article>
</div>
<!--end of section5-->
</div>
<!--end of content-->
</div>
<!--end of gridContainer-->
http://codepen.io/anon/pen/xGgbKN

Add this to the places you want to send the links (wher the anchors are). For ex:
<div id="section2" class="fluid" name="section2">
Then change your links:
成立背景
And add this script to your page footer:
var menuContainer = $('header').height();
function scrollToAnchor(anchorName){
var aTag = $("div[name='"+ anchorName +"']");
$('html,body').animate({scrollTop: aTag.offset().top - menuContainer },'slow');
}
Finally here's a Fiddle: http://jsfiddle.net/x2skzp1p/
Cheers

Why do my link not work after adding negative margin to nav?

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>

How To Make Entire 'li' Area and Text A Clickable Link

I'm trying to make the entire li tag area clickable as well as the text which I have made clickable already. I have tried giving it a href property but that doesn't work. I have already set the li background to change color when it's hovered over but as I said, how do I also make the entire area clickable? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 id="sectwohead">Best Selling Books Right Now</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
}
#sectwohead{
margin: 2em 0 2em 0;
color: #888888;
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
This should help see more clearly what I'm trying to do, as you can see in this image - http://i.imgur.com/OZIt9TM.png - The only clickable area is the blue part within chromes inspect that's easy to see. So what I'm trying to do is make the entire area of that specific 'Home Li' clickable.

Rule #1 of list-based menus: Style the links, not the wrappers. Only style the list for positioning (display/float etc.).
Use display:block on your A-tags and put all styling on that tag, not the list itself.
Home
Move background-color: #333 to the .link class in your css, and add display:block to that declaration.

If you are using jQuery (assuming the tags are right) you can do it like this without styling the anchor tags:
$('ul li').click(function() {
location.href = $(this).find('a').prop('href');
});
I would suggest a class name for the ul list like <ul class="navigation">
$('ul.navigation li').click(function() {
location.href = $(this).find('a').prop('href');
});

Ups sorry...Try this..
#nav li {
list-style-type: none;
/* margin: 0; */
/* padding: 0.75em 0 0.75em 0; */
/* text-align: center; */
/* max-width: 100%; */
/* display: block; */
}
#nav li a {
display: block;
padding: 0.5em 0;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}

Wrap your A tag around the LI tag. For example look at the google link. You're putting the A tag around the text only, not the entire element.
<ol>
<a href="http://google.com">
<li>google</li> <!-- DO THIS -->
</a>
<li>
yahoo <!-- YOUR CURRENTLY DOING THIS -->
</li>
</ol>

Categories