Develop Reference

I want to scroll or point that alphabet when clicked in menu

Menu and Alphabet Selection
In this project, the user can search for that particular alphabet's Word by clicking on the alphabet listed in Menu.
To see the menu click on the Alphabet header with black Background.
⚠️Important thing test it on full screen
What I want is that I click on the alphabets on the list in the menu then the screen should point or scroll to the Alphabet I have clicked on.
function wordbar(){
let y = document.getElementById("Invisible");
if(y.className === "Hiddenbox"){
document.querySelector("body").style.overflow = "hidden";
document.getElementById("Invisible").style.visibility = "visible";
}else{
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.display = "none";
}
}
function Removebar(){
const hiddenbox = document.getElementById("Invisible").className;
if(hiddenbox === "Hiddenbox"){
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.visibility = "hidden";
}else{
document.querySelector("body").style.overflow = "";
document.getElementById("Invisible").style.display = "";
}
}
body{
overflow: auto;
}
.Mainbox{
width: 100%;
}
h2{
height: 30px;
font-family: montserrat;
color: white;
background-color: black;
padding: 10px;
padding-left: 40px;
position: sticky;
top: 10px;
border-radius: 5px;
cursor: pointer;
}
li{
font-family: poppins;
list-style: none;
height: 40px;
display: flex;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid grey;
padding-left: 40px;
}
ul{
padding: 0px;
}
.Hiddenbox{
visibility: hidden;
margin-top: 10px;
width: 100%;
padding: 10px 0px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 0px;
height: 100vh;
box-sizing: border-box;
/* background-color: #d2d2d2;
*/
position: fixed;
top: 0px;
}
.container{
width: 45%;
padding: 30px 50px 10px;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
column-gap: 10px;
max-height: 400px;
height: 300px;
border: 1px solid dimgrey;
background-color: black;
border-radius: 8px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(50px);
position: relative;
}
.click-lines{
width: 50px;
height: 50px;
display: flex;
align-items: center;
font-size: 16px;
justify-content: center;
border: 1px solid dimgrey;
border-radius: 0.5em;
padding: 0px;
transition: all 0.1s ease;
color: white;
text-align: auto;
cursor: pointer;
}
.click-lines:hover{
background-color: white;
color: black;
border: 1px solid grey;
transform: scale(1.04);
}
.togglebar{
color: white;
font-size: 30px;
padding: 0px;
border: 0px;
width: 30px;
height: auto;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#media screen and (max-width: 600px){
.click-lines{
width: 30px;
height: 30px;
}
}
<div class="Mainbox" id="box">
<h2 href="javascript:void()" onclick="wordbar()" id="A-letter">A</h2>
<ul>
<li>Apple</li>
<li>Appiv</li>
<li>Ananus</li>
<li>Ambar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">B</h2>
<ul>
<li>Bejing</li>
<li>brothal</li>
<li>brother</li>
<li>Banana</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" >C</h2>
<ul>
<li>Cat</li>
<li>cow</li>
<li>calculas</li>
<li>car</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">D</h2>
<ul>
<li>Dat</li>
<li>Dow</li>
<li>Dalculas</li>
<li>Dar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">E</h2>
<ul>
<li>Eat</li>
<li>Eow</li>
<li>Ealculas</li>
<li>Ear</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">F</h2>
<ul>
<li>Feet</li>
<li>Form</li>
<li>fungus</li>
<li>Fan</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">G</h2>
<ul>
<li>Grasp</li>
<li>Grow</li>
<li>Game</li>
<li>Goat</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">H</h2>
<ul>
<li>hola</li>
<li>Hampter</li>
<li>Hercules</li>
<li>Hear</li>
</ul>
</div>
<div class="Hiddenbox" id="Invisible">
<div class="container">
<li href="#A" onclick="Removebar()" class="click-lines">A</li>
<li href="#B" onclick="Removebar()" class="click-lines">B</li>
<li href="#C" onclick="Removebar()" class="click-lines">C</li>
<li href="#D" onclick="Removebar()" class="click-lines">D</li>
<li href="#E" onclick="Removebar()" class="click-lines">E</li>
<li href="#F" onclick="Removebar()" class="click-lines">F</li>
<li href="#G" onclick="Removebar()" class="click-lines">G</li>
<li href="#H" onclick="Removebar()" class="click-lines">H</li>
<li href="#I" onclick="Removebar()" class="click-lines">I</li>
<li href="#J" onclick="Removebar()"class="click-lines">J</li>
<li href="#K" onclick="Removebar()"class="click-lines">K</li>
<li href="#L" onclick="Removebar()"class="click-lines">L</li>
<li href="#M" onclick="Removebar()"class="click-lines">M</li>
<li href="#N" onclick="Removebar()"class="click-lines">N</li>
<li href="#O" onclick="Removebar()"class="click-lines">O</li>
<li href="#P" onclick="Removebar()"class="click-lines">P</li>
<li href="#Q" onclick="Removebar()"class="click-lines">Q</li>
<li href="#R" onclick="Removebar()"class="click-lines">R</li>
<li href="#S" onclick="Removebar()"class="click-lines">S</li>
<li href="#T" onclick="Removebar()"class="click-lines">T</li>
<li href="#U" onclick="Removebar()"class="click-lines">U</li>
<li href="#V" onclick="Removebar()"class="click-lines">V</li>
<li href="#W" onclick="Removebar()"class="click-lines">W</li>
<li href="#X" onclick="Removebar()"class="click-lines">X</li>
<li href="#Y" onclick="Removebar()"class="click-lines">Y</li>
<li href="#Z" onclick="Removebar()"class="click-lines">Z</li>
<li class="togglebar" href="javascript:void(0)" onclick="Removebar()" >×</li>
</div>
</div>

Edit - fixing scrolling up problem
We can't get your items ' position correctly because you are using position relative. Instead, we will use the more bulletproof version - element.getBoundingClientRect().
this method returns a DOMRect object providing information about the
size of an element and its position relative to the viewport
So we eventually get the top, right, down and left offset positions relative to the viewport.
we will use that to get the top offset and scroll to it in the following manner
let letterElement = document.querySelector(`#${letter}-letter`);
window.scrollTo(0, letterElement.getBoundingClientRect().top);
instead of:
document.getElementById(`${letter}-letter`).scrollIntoView();
Now it should work flawlessly (I also changed the fiddle below for you to see).
You are actually pretty close to solving it in your current implementation!
you should add a variable to your removeBar() function to hold the selected letter and use scrollIntoView when selecting its ID.
lets take the letter A, on its <h2> tag you have the id "a-letter". to scroll it into view, you should add to the function that is called on A button onClick event the letter 'A', i.e.
<li href="#A" onclick="Removebar('a')" class="click-lines">A</li>
then, in your removeBar() function declare the variable inside the parentheses, removeBar(letter).
now we can catch the id, and scrollIntoView.
the full code:
function wordbar(){
let y = document.getElementById("Invisible");
if(y.className === "Hiddenbox"){
document.querySelector("body").style.overflow = "hidden";
document.getElementById("Invisible").style.visibility = "visible";
}else{
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.display = "none";
}
}
function Removebar(letter){
const hiddenbox = document.getElementById("Invisible").className;
if(hiddenbox === "Hiddenbox"){
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.visibility = "hidden";
let letterElement = document.querySelector(`#${letter}-letter`);
window.scrollTo(0,letterElement.getBoundingClientRect().top);
}else{
document.querySelector("body").style.overflow = "";
document.getElementById("Invisible").style.display = "";
}
}
body{
overflow: auto;
}
.Mainbox{
width: 100%;
}
h2{
height: 30px;
font-family: montserrat;
color: white;
background-color: black;
padding: 10px;
padding-left: 40px;
position: sticky;
top: 10px;
border-radius: 5px;
cursor: pointer;
}
li{
font-family: poppins;
list-style: none;
height: 40px;
display: flex;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid grey;
padding-left: 40px;
}
ul{
padding: 0px;
}
.Hiddenbox{
visibility: hidden;
margin-top: 10px;
width: 100%;
padding: 10px 0px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 0px;
height: 100vh;
box-sizing: border-box;
/* background-color: #d2d2d2;
*/
position: fixed;
top: 0px;
}
.container{
width: 45%;
padding: 30px 50px 10px;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
column-gap: 10px;
max-height: 400px;
height: 300px;
border: 1px solid dimgrey;
background-color: black;
border-radius: 8px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(50px);
position: relative;
}
.click-lines{
width: 50px;
height: 50px;
display: flex;
align-items: center;
font-size: 16px;
justify-content: center;
border: 1px solid dimgrey;
border-radius: 0.5em;
padding: 0px;
transition: all 0.1s ease;
color: white;
text-align: auto;
cursor: pointer;
}
.click-lines:hover{
background-color: white;
color: black;
border: 1px solid grey;
transform: scale(1.04);
}
.togglebar{
color: white;
font-size: 30px;
padding: 0px;
border: 0px;
width: 30px;
height: auto;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#media screen and (max-width: 600px){
.click-lines{
width: 30px;
height: 30px;
}
}
<div class="Mainbox" id="box">
<h2 href="javascript:void()" onclick="wordbar()" id="a-letter">A</h2>
<ul>
<li>Apple</li>
<li>Appiv</li>
<li>Ananus</li>
<li>Ambar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="b-letter">B</h2>
<ul>
<li>Bejing</li>
<li>brothal</li>
<li>brother</li>
<li>Banana</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="c-letter">C</h2>
<ul>
<li>Cat</li>
<li>cow</li>
<li>calculas</li>
<li>car</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="d-letter">D</h2>
<ul id="d-words">
<li>Dat</li>
<li>Dow</li>
<li>Dalculas</li>
<li>Dar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="e-letter">E</h2>
<ul>
<li>Eat</li>
<li>Eow</li>
<li>Ealculas</li>
<li>Ear</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="f-letter">F</h2>
<ul>
<li>Feet</li>
<li>Form</li>
<li>fungus</li>
<li>Fan</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="g-letter">G</h2>
<ul>
<li>Grasp</li>
<li>Grow</li>
<li>Game</li>
<li>Goat</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="h-letter">H</h2>
<ul id="h-words">
<li>hola</li>
<li>Hampter</li>
<li>Hercules</li>
<li>Hear</li>
</ul>
</div>
<div class="Hiddenbox" id="Invisible">
<div class="container">
<li href="#A" onclick="Removebar('a')" class="click-lines">A</li>
<li href="#B" onclick="Removebar('b')" class="click-lines">B</li>
<li href="#C" onclick="Removebar('c')" class="click-lines">C</li>
<li href="#D" onclick="Removebar('d')" class="click-lines">D</li>
<li href="#E" onclick="Removebar('e')" class="click-lines">E</li>
<li href="#F" onclick="Removebar('f')" class="click-lines">F</li>
<li href="#G" onclick="Removebar('g')" class="click-lines">G</li>
<li href="#H" onclick="Removebar('h')" class="click-lines">H</li>
<li href="#I" onclick="Removebar('i')" class="click-lines">I</li>
<li href="#J" onclick="Removebar()"class="click-lines">J</li>
<li href="#K" onclick="Removebar()"class="click-lines">K</li>
<li href="#L" onclick="Removebar()"class="click-lines">L</li>
<li href="#M" onclick="Removebar()"class="click-lines">M</li>
<li href="#N" onclick="Removebar()"class="click-lines">N</li>
<li href="#O" onclick="Removebar()"class="click-lines">O</li>
<li href="#P" onclick="Removebar()"class="click-lines">P</li>
<li href="#Q" onclick="Removebar()"class="click-lines">Q</li>
<li href="#R" onclick="Removebar()"class="click-lines">R</li>
<li href="#S" onclick="Removebar()"class="click-lines">S</li>
<li href="#T" onclick="Removebar()"class="click-lines">T</li>
<li href="#U" onclick="Removebar()"class="click-lines">U</li>
<li href="#V" onclick="Removebar()"class="click-lines">V</li>
<li href="#W" onclick="Removebar()"class="click-lines">W</li>
<li href="#X" onclick="Removebar()"class="click-lines">X</li>
<li href="#Y" onclick="Removebar()"class="click-lines">Y</li>
<li href="#Z" onclick="Removebar()"class="click-lines">Z</li>
<li class="togglebar" href="javascript:void(0)" onclick="Removebar()" >×</li>
</div>
</div>

Here's some scrolling on the cheap.
CSS
html {
scroll-behavior: smooth;
}
HTML
<a href=#ID>ID</a>
<h1 id='ID'>ID</h1>
html {
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
}
menu {
display: flex;
margin-left: 40px;
list-style: none;
}
li {
margin: 0 10px;
}
section {
min-height: 300vh;
}
<nav>
<menu>
<li><a href='#top'>Top</a></li>
<li><a href='#mid'>Mid</a></li>
<li><a href='#sub'>Sub</a></li>
</menu>
</nav>
<section>
<h1 id='top'>TOP</h1>
<hr>
</section>
<section>
<h1 id='mid'>MID</h1>
<hr>
</section>
<section>
<h1 id='sub'>SUB</h1>
<hr>
</section>

Navbar works from my computer but not on the internet

I have 2 versions of a website i made one in english one in french. The navbar for the english version works perfectly on my computer and live on the internet so When i test the french website version on my computer the navbar works exactly as it should yet when live on the internet it's stuck at the top of the page, where as its suppose to be about 5 cms under the top. Here is the html and css code:
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">
<li>Hébergement Web</li>
<li class="dropdown">
Forfaits
<ul class="dropdown-menu">
<li>Hébergement Partagé</li>
<li>Hébergement WordPress</li>
<li>Hébergement Cloud VPS</li>
</ul>
</li>
<li>Noms de domaines</li>
<li>Emails</li>
<li>E-commerce</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<a href="à propos de.html" class="dropdown-toggle" data-
toggle="dropdown">à propos de</a>
<li>Services</li>
<li>UTD Webhosting</li>
<li>Nos Datacenters</li>
</li>
<ul class="dropdown-menu">
<li>Coming Soon</li>
<li>404</li>
</ul>
</li>
</ul>
<li>Contact</li>
</ul>
<!-- Header Nav Links End -->
</div>
</div>
</nav>
<!-- Header Navbar End -->
</header>
CSS:
.header--navbar > .container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links > li {
float: none;
}
.header--nav-links > li > a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links > .dropdown > .dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links > .dropdown > .dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links > .dropdown > .dropdown-menu .dropdown-menu > li > a {
padding-left: 40px;
padding-right: 40px;
}

Quite a few of your tags (ul, li, also div) aren't closed properly in the code you posted. Browsers will try to interpret this in some way, but not necessarily the way you intended it, so this might be a cause for your problem.
I fixed those unclosed tags in the snippet below. It's hard to check your CSS, since most of the CSS rules you posted don't apply at all in the snippet, since they use the class .header--nav-links and similar in their selectors which isn't included in your HTML code.
Nevertheless, maybe the edited HTML code already fixes the display problem you are mentioning.
.header--navbar>.container {
position: relative;
}
.header--navbar .navbar-header {
float: none;
}
.header--cart-btn {
float: none;
position: absolute;
top: 1px;
right: 85px;
margin-left: 0;
}
.header--navbar .navbar-toggle {
display: block;
}
.header--navbar .navbar-collapse {
float: none;
display: none !important;
position: absolute;
left: 15px;
right: 15px;
max-height: -340px;
box-shadow: 0 3px 8px rgba(0, 0, 0, .085);
overflow: auto !important;
}
.header--navbar .navbar-collapse.collapsing,
.header--navbar .navbar-collapse.in {
display: block !important;
}
.header--nav-links {
margin-top: 12px;
margin-left: 0;
margin-right: 0;
color: #222;
background-color: #fff;
}
.header--nav-links>li {
float: none;
}
.header--nav-links>li>a {
display: block;
padding-left: 20px;
padding-right: 20px;
}
.header--nav-links>.dropdown>.dropdown-menu {
float: none;
position: relative;
margin-top: 0;
padding: 0;
box-shadow: none;
}
.header--nav-links>.dropdown>.dropdown-menu a {
padding-left: 30px;
padding-right: 30px;
}
.dropdown-menu .dropdown-menu {
float: none;
position: relative;
top: 0;
left: 0;
margin-left: 0;
padding: 0;
box-shadow: none;
}
.dropdown-menu .dropdown-toggle:before {
content: "\f107";
}
.header--nav-links>.dropdown>.dropdown-menu .dropdown-menu>li>a {
padding-left: 40px;
padding-right: 40px;
}
<div id="headerNav" class="navbar-collapse collapse float--right">
<!-- Header Nav Links Start -->
<ul class="header--nav-links nav">
<li class="dropdown">Hébergement Web</li>
<li class="dropdown">
Forfaits
<ul class="dropdown-menu">
<li>Hébergement Partagé</li>
<li>Hébergement WordPress</li>
<li>Hébergement Cloud VPS</li>
</ul>
</li>
<li>Noms de domaines</li>
<li>Emails</li>
<li>E-commerce</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
à propos de
<li>Services</li>
<li>UTD Webhosting</li>
<li>Nos Datacenters</li>
</ul>
<ul class="dropdown-menu">
<li>Coming Soon</li>
<li>404</li>
</ul>
</li>
<li>Contact</li>
</ul>
<!-- Header Nav Links End -->
</div>
<!-- Header Navbar End -->

How to add navigation bar on a image

First day of me learning to code in html and css.
I'm trying to add navigation bar on a image but i am unable to do so.
The background image i am trying to add is not displaying too.
Can anyone help me out here.
.header {
background-image: url("vent1.jpg");
}
.nav {
overflow: hidden;
float: left;
background-color: #333;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu-bar {
list-style-type: none;
text-align: center;
}
.ul {
display: inline-block;
padding: 8px;
margin: 0px;
color: white;
}
<div class="header">
<div class="nav">
<div class="menu-bar">
<ul>
<li> Home</li>
<li>
About Us</li>
<li>
Portfolio</li>
<li>
Contact</li>
</ul>
</div>
</div>
</div>

header class should have these properties.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("vent1.jpg");
background-repeat: no-repeat;
background-size:cover;
}

highlight active menu item on Page Scroll?

I want to add a active function to the current menu item on page scroll. It’s a single page with different sections. When click on an item, the active state should switch to the current one.
As you scroll down the page, the active menu item changes. How is this done? Would guys give me a answer base on my demo coding? Thanks.
My demo: http://jsfiddle.net/x2skzp1p/1/
var menuContainer = $('header').height();
function scrollToAnchor(anchorName) {
var aTag = $("div[name='" + anchorName + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - menuContainer
}, 'slow');
console.log(anchorName);
}
.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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gridContainer clearfix">
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li><a onClick="scrollToAnchor('section1');" title="成立背景">SECTION 1</a>
</li>
<li><a onClick="scrollToAnchor('section2');" title="協會使命">SECTION 2</a>
</li>
<li><a onClick="scrollToAnchor('section3');" title="營運模式">SECTION 3</a>
</li>
<li><a onClick="scrollToAnchor('section4');" title="協會組織">SECTION 4</a>
</li>
<li><a onClick="scrollToAnchor('section5');" title="活動及刊物">SECTION 5</a>
</li>
</ul>
</nav>
</header>
<!--end of header-->
<!--start of content-->
<div class="fluid" id="content">
<div id="section1" class="fluid" name="section1">
<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" name="section2">
<article>
<h2 class="content-title"> SECTION 2</h2>
<p class="content-p-black">資訊科技易達協會是一個社會企業致力提供專業資訊科技服務，同時為嚴重殘疾人士提供培訓及工作機會，讓學員可選擇在家居從事資訊科技相關工作；協會全力推動無障礙軟件開發，協助社會資訊共融。</p>
</article>
</div>
<!--end of section2-->
<div id="section3" class="fluid" name="section3">
<article>
<h2 class="content-title"> SECTION 3</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" name="section4">
<article>
<h2 class="content-title"> SECTION 4</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" name="section5">
<article>
<h2 class="content-title"> SECTION 5</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>
<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-->

$(document).ready( function (){
var topMenu = $("#navmenu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
});
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li>SECTION 1</li>
<li>SECTION 2</li>
<li>SECTION 3</li>
<li>SECTION 4</li>
<li>SECTION 5</li>
</ul>
</nav>
</header>
and add this style
#navmenu li a .active {
background-color: #294C52;
color: #FFFFFF;
}

You can use onscroll event to set active div and an active class to set it:
$(function () {
$("body").onscroll(function () {
$("#navmenu li").removeClass("active");
if ($("body").scrollTop() > $("#section5").offset().top)
$("#navmenu li").eq(4).addClass("active");
else if ($("body").scrollTop() > $("#section4").offset().top)
$("#navmenu li").eq(3).addClass("active");
else if ($("body").scrollTop() > $("#section3").offset().top)
$("#navmenu li").eq(2).addClass("active");
else if ($("body").scrollTop() > $("#section2").offset().top)
$("#navmenu li").eq(1).addClass("active");
else
$("#navmenu li").eq(0).addClass("active");
});
});

Stop scrolling at some point

im having a problem making an div stop scrolling at a certain point. I've looked at others solutions but i cant make it work on mine. Anybody care to take a look and tell me what i've done wrong?
My code's:
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#header').followTo(250);
#charset "utf-8";
/* CSS Document */
/*Index*/
#index {
background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg);
background-repeat: no-repeat;
background-position: center 10;
background-attachment: fixed;
}
#venstre {
float: left;
}
#midt {
float: left;
}
#header {
position: fixed;
top: 0;
left: 0;
height: auto;
}
#header a {
list-style-type: none;
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
font-size: 60px;
float: left;
margin-top: 32px;
margin-left: 40px;
margin-right: 650px;
position: relative;
}
#header form {
float: right;
margin-top: 26px;
margin-right: 49px;
}
#righto {
float: right;
}
#lefto {
float: left;
}
#Wrapper {
clear: both;
}
.anker {
width: 67px;
height: 52px;
padding: 10px;
margin-left: 147px;
margin-top: 207px;
float: left;
position: fixed;
}
.anker a {
text-decoration: none;
text-align: center;
}
.anker ul li {
list-style-type: none;
}
.undercirkel {
margin-top: 0;
margin-left: 20px;
list-style-type: none;
}
.undercirkelt {
margin-top: 0;
margin-left: 800px;
list-style-type: none;
}
.box {
background-color: #FFFFFF;
float: left;
width: 700px;
height: 390px;
margin-left: 428px;
margin-top: 187px;
opacity: 0.4;
z-index: -1;
}
.boxt {
background-color: #FFFFFF;
float: left;
width: 700px;
height: 390px;
margin-left: 428px;
opacity: 0.4;
z-index: -1;
}
.dropdown {
width: auto;
float: left;
position: fixed;
margin-top: 190px;
}
.dropdown a {
text-decoration: none;
color: #FFFFFF;
font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
text-align: center;
font-size: 18px;
margin: 2px 0 2px 0;
}
.dropdown a:hover {
color: #282828;
}
.dropdown ul a {
display: block;
}
.dropdown ul {
list-style-type: none;
margin: 0 auto;
}
.drop {
background-color: #393939;
border: #D4D4D4;
}
.drop li:hover {
background-color: #808080;
border: #D4D4D4;
}
.undermenu {
display: none;
}
.undermenu li a {
display: block;
text-decoration: none;
margin-left: 50px;
}
.undermenu li {
clear: both;
background-color: #393939;
}
.dropdown li:hover .undermenu {
display: block;
position: absolute;
}
.dropdown li:hover .undermenu li {
float: left;
font-size: 13px;
}
.dropdown ul li ul li a {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
#right {
width: 300px;
background-color: #FFFFFF;
float: right;
margin-right: 52px;
margin-top: 200px;
position: fixed;
margin-left: 1250px;
opacity: 0.4;
}
#right img {
padding: 15px;
}
.footer {
clear: both;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rockentusiasterne</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/js.js"></script>
<script>
var windw = this;
$.fn.followTo = function(pos) {
var $this = this,
$window = $(windw);
$window.scroll(function(e) {
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 40
});
}
});
};
$('#scrollto-menu-nav').followTo(250);
</script>
</head>
<body id="index">
<div id="header">
<div id="lefto">Rockentusiasterne
</div>
<div id="righto">
<form>
<label>
<img src="../img/search.png">
</label>
<input type="search" name="search" placeholder="Søg">
</input>
</form>
</div>
</div>
<div id="Wrapper">
<div id="left">
<div class="dropdown">
<ul>
<div class="drop">
<li>Forside
</li>
</div>
<div class="drop">
<li>Genrer
<ul class="undermenu">
<li>Rock'n'Roll
</li>
<li>Alternativ musik
</li>
<li>Grunge
</li>
</ul>
</li>
</div>
<div class="drop">
<li>Om os
</li>
</div>
<div class="drop">
<li>Forum
<ul class="undermenu">
<li>Opret bruger
</li>
<li>FAQ
</li>
</ul>
</li>
</div>
<div class="drop">
<li>Kontakt os
</li>
</div>
</ul>
</div>
</div>
<div id="innerwrapper">
<div id="midt">
<div class="anker">
<ul>
<li>
<a href="#1">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="#2">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="3">
<img src="../img/cirkel.png">
</a>
</li>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<div class="undercirkel">
<li>
<img src="../img/undercirkel.png">
</li>
</div>
<li>
<a href="4">
<img src="../img/cirkel.png">
</a>
</li>
</div>
<div class="box">
<a name="1"></a>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="undercirkelt">
<li>
<img src="../img/undercirkelt.png">
</li>
</div>
<div class="boxt">
<a name="2"></a>
</div>
</div>
<div id="right">
<img src="../img/metallica/Metallica-on-Howard-Stern-Show-Wallpaper.png" width="81" height="60">
</div>
<div class="footer"></div>
</body>
</html>

Unbind the scroll event. Something like
$(window).unbind('scroll');
Hope this helps.