Develop Reference

Content inside div with fixed position just can scroll half of content

I have a sidebar with a position fixed that can vertically scroll. But why when I scroll it, I just can scroll to half of the content of the sidebar I cant scroll until to the bottom of the sidebar.
As you can see in the first pic, there's still text follow us, but I cant scroll anymore. the second image is the image of the full sidebar
First image
second image
$(document).ready(function () {
//OPEN FOR SIDEBAR MOBILE
$(".toggle-menu button").click(function () {
$(".menu-list-container").addClass("show");
$(".menu-list").css("width", "275px");
$(".notify").addClass("hide");
$(".livetv").addClass("hide");
$(".close-mobile").css("display", "block");
});
//SCRIPT FOR CLOSING SIDEBAR MOBILE
$(".close-mobile").click(function () {
$(".menu-list-container").removeClass("show");
$(".menu-list").css("width", "0px");
$(".notify").removeClass("hide");
$(".livetv").removeClass("hide");
$(".close-mobile").css("display", "none");
})
})
/* SCSS */
.navbar-mobile {
position: sticky;
top: 0;
right: 0;
left: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: $white;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
z-index: 100;
.toggle-menu {
position: relative;
width: 10%;
}
.logo {
width: 50%;
position: relative;
img {
position: absolute;
transform: translateY(-18px);
max-width: 134px;
}
}
.navbar-right {
width: 40%;
display: flex;
flex-flow: row nowrap;
div {
width: calc(200px - 20px);
}
.livetv {
a {
color: $black;
text-decoration: none;
text-align: center;
img {
display: block;
margin: 0 auto;
}
span {
display: block;
font: $small;
}
}
}
.notify {
position: relative;
button {
position: absolute;
top: -50%;
transform: translateY(25px);
background: none;
border: none;
}
}
.close-mobile {
display: none;
position: relative;
button {
background: none;
border: none;
position: absolute;
right: 32px;
top: 12px;
}
}
}
.menu-list-container {
position: relative;
max-width: 275px;
height: auto;
.menu-list {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 0px;
//width: 275px;
overflow-y: scroll;
background-color: $white;
transition: ease-out 300ms;
z-index: 1;
.header {
background: url("../../asset/header.png") no-repeat;
background-size: cover;
color: $white;
.flex {
position: relative;
display: flex;
flex-flow: row nowrap;
.image-container {
display: flex;
justify-content: center;
align-items: center;
img {
width: 65px;
height: 65px;
border-radius: 8px;
border: solid 2px $white;
}
}
.header-info {
width: auto;
p {
font: $heading6;
}
a {
color: $white;
opacity: 0.7;
text-decoration: none;
}
}
}
}
.form-search {
position: relative;
border-bottom: solid 1px $gray1;
input {
width: 100%;
height: 50px;
border: solid 1px $gray3;
border-radius: 8px;
}
button {
position: absolute;
top: 37px;
right: 30px;
background: none;
border: none;
}
}
.menu-content {
border-bottom: solid 1px $gray1;
ul {
list-style: none;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
li {
a {
color: $black;
text-decoration: none;
}
}
.live-tv {
a {
color: $secondary;
font: $heading4;
}
}
.live-tv:before {
content: url("../../asset/icons/livetv-icon.svg");
position: relative;
top: 2px;
}
.foryou::before {
content: url("../../asset/icons/check.svg");
position: relative;
top: 2px;
}
.saved::before {
content: url("../../asset/icons/save.svg");
position: relative;
top: 2px;
}
.tv-schedule::before {
content: url("../../asset/icons/check.svg");
position: relative;
}
.livetv-regular::before {
content: url("../../asset/icons/livetv.svg");
position: relative;
}
.brandconnect::before {
content: url("../../asset/icons/brandconnect.svg");
position: relative;
}
li:last-child {
margin-bottom: 0 !important;
}
}
}
.program {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
margin-block-start: 0;
}
ul {
padding-inline-start: 0;
margin-block-end: 0;
margin-block-start: 0;
list-style: none;
li {
display: flex;
.image {
width: 48px;
border-radius: 8px;
img {
width: 100%;
object-fit: cover;
border-radius: 8px;
}
}
.image:last-child {
background-color: $gray1;
}
.pl-20 {
width: 70%;
a {
color: $black;
text-decoration: none;
}
}
}
li:last-child {
.image {
display: flex;
justify-content: center;
align-items: center;
background-color: $gray1;
border-radius: 50%;
height: 48px;
img {
width: auto !important;
}
}
a {
font: $heading4;
}
}
}
}
}
.social {
border-bottom: solid 1px $gray1;
p {
font: $heading4;
}
.social-list {
display: flex;
flex-flow: row nowrap;
.social-item {
width: calc(100px - 20px);
height: 43.75px;
border-radius: 50%;
img {
display: block;
position: absolute;
margin: 0 auto;
transform: translate(13px, -7px);
}
}
.facebook img {
transform: translate(15px, -11px) !important;
}
.social-item:last-child {
margin-right: 0 !important;
}
}
}
.signout {
a {
color: $black;
text-decoration: none;
}
a:before {
content: url("../../asset/icons/signout.svg");
position: relative;
}
}
}
.show {
visibility: visible !important;
}
.hide {
visibility: hidden !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar-mobile">
<div class="toggle-menu pl-10">
<button type="button" class="btn">
<img src="../asset/icons/menu.svg" alt="menu icon" />
</button>
</div>
<div class="logo">
<a href="#">
<img src="../asset/logo.png" alt="logo" />
</a>
</div>
<div class="navbar-right">
<div class="livetv pr-20">
<a href="livetv.html">
<img src="../asset/icons/livetv.svg" alt="live tv" />
<span>Live TV</span>
</a>
</div>
<div class="notify">
<button type="button">
<img src="../asset/icons/bell-black.svg" alt="notify icon" />
</button>
</div>
<div class="close-mobile">
<button type="button">
<img src="../asset/icons/close-black.png" alt="close-icon" />
</button>
</div>
</div>
<div class="menu-list-container">
<div class="menu-list">
<div class="header p-20">
<div class="flex">
<div class="image-container">
<img src="../asset/avatar.png" alt="avatar" />
</div>
<div class="header-info pl-20">
<p>muhammad Rojali hernandez</p>
<span><img src="../asset/icons/" ></span>Setting
</div>
</div>
</div>
<form class="form-search pt-20 pb-20 ml-20 mr-20" method="post">
<input type="text" name="search" required />
<button type="submit">
<img src="../asset/icons/search-icon.svg" alt="Search Icon" />
</button>
</form>
<div class="menu-content pt-20 pb-20 ml-20 mr-20">
<ul>
<li class="live-tv mb-20">
<a class="pl-10" href="livetv.html">LIVE TV</a>
</li>
<li class="foryou mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="saved mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="program pt-20 pb-20 ml-20 mr-20">
<p>PROGRAM</p>
<ul>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program1.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Soccer Time
</div>
</li>
<li class="mb-20">
<div class="image">
<img src="../asset/program4.png" alt="program image" />
</div>
<div class="pl-20 pt-10">
Kick Andy
</div>
</li>
<li class="browse">
<div class="image">
<img src="../asset/icons/add.svg" alt="browse icon" />
</div>
<div class="pl-20 pt-10">
Browse Program
</div>
</li>
</ul>
</div>
<div class="menu-content pt-30 pb-30 ml-20 mr-20">
<ul>
<li class="tv-schedule mb-20">
<a class="pl-10" href="livetv.html">TV Schedule</a>
</li>
<li class="livetv-regular mb-20">
<a class="pl-10" href="foryou.html">For You</a>
</li>
<li class="brandconnect mb-20">
<a class="pl-10" href="#">Saved Video</a>
</li>
</ul>
</div>
<div class="social mt-30 mb-30 ml-20 mr-20">
<p>FOLLOW US</p>
<div class="social-list">
<div class="social-item facebook mr-20">
<a href="#">
<img src="../asset/icons/facebook.svg" alt="facebook icon" />
</a>
</div>
<div class="social-item twitter mr-20">
<a href="#">
<img src="../asset/icons/twitter.svg" alt="twitter icon" />
</a>
</div>
<div class="social-item instagram mr-20">
<a href="#">
<img src="../asset/icons/instagram.svg" alt="instagram icon" />
</a>
</div>
<div class="social-item youtube mr-20">
<a href="#">
<img src="../asset/icons/youtube.svg" alt="youtube icon" />
</a>
</div>
</div>
</div>
<div class="signout pt-30 pb-30 ml-20 mr-20">
Sign Out
</div>
</div>
</div>
</nav>

How do I stick my footer to the bottom when there is less content in my html page

Can someone help me out to figure how to stick my footer to the bottom of my projects page, as it sticks down on other pages but not on this specific projects page, I think it's because it does not have a lot on content in it, I have tries various solutions present on the internet, but none of them have worked yet, so please help me out with this, I really appreciate any help I get.
Here is my html code for my projects page.
html {
position: relative;
min-height: 100%;
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (min-width: 1000px) {
header .header-brand {
margin: 31px 0;
text-align: center;
line-height: 38px;
padding: 0 20px 0 40px;
float: left;
}
}
.social-footer {
margin-top: 40px;
width: 850px;
background-color: #111;
color: #f1f1f1;
text-align: center;
padding: 10px;
justify-content: center;
align-items: center;
/* display: -webkit-flex; */
/* display: -ms-flexbox; */
/* -webkit-align-items: center;
-ms-flex-align: center; */
/* -webkit-justify-content: space-between; */
/* -ms-flex-pack: justify; */
}
.social-footer .social-footer-icons li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
.social-footer .social-footer-icons li:last-of-type {
margin-right: 0;
}
.social-footer .social-footer-icons .fa {
font-size: 1.3rem;
color: #fefefe;
}
.social-footer .social-footer-icons .fa:hover {
color: #4a4a4a;
transition: color 0.3s ease-in;
}
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="bg">
<header>
<img src="images/default.png" alt="Logo" width="100" , height="70">
<div class="container">
<nav class="navbar">
<div class="menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
<li class="nav-item">Home</li>
<li class="nav-item">About Me</li>
<li class="nav-item">Projects</li>
<li class="nav-item">Contact Me</li>
<li class="nav-item">Hire Me</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="projects-links">
<div class="wrapper">
<h2>Projects</h2>
<a href="GoGrocery.html">
<div class="projects-link">
<p>GoGrocery</p>
</div>
</a>
<a href="TalkBoxPro.html">
<div class="projects-link">
<p>TalkBox-Pro</p>
</div>
</a>
<!-- <div class="projects-link"><p>Medi Co.</p></div> -->
</div>
</section>
<section class="projects-links">
<div class="wrapper">
<h2>Under Construction</h2>
<div class="projects-link">
<p>Medi Co.</p>
</div>
</div>
</section>
</main>
<div class="wrapper">
<footer class="social-footer" id="footer">
<div class="social-footer-icons">
<ul class="menu simple">
<li><i class="fa fa-facebook" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</body>

Music player skip forward/backward functionality JQuery

New project this time, I'm working on a music player widget and I've hit a wall. I'm looking to make it so that the player can cycle the active track with skip forward and backward buttons and I know that it's easier to do when you put your elements in a list, but I still have no idea. I haven't yet hooked this up to any sort of tracklist or api or anything like that, right now I want to get the visual functionalities working.
Here's the Codepen as well.
function currentlyPlaying(target) {
var current = target.parent();
$('.playingTitle').text(current.children('.title').text());
$('.playingAuthor').text(current.children('.author').text());
}
$(document).on('click', '.play', function(e){
$('.pause').attr('class', 'icon play');
$(e.target).attr('class', 'icon pause');
currentlyPlaying( $(e.target));
});
$(document).on('click', '.playing', function(e){
$('.playing').attr('class', 'playingPaused paused controls');
});
$(document).on('click', '.paused', function(e){
$('.paused').attr('class', 'playingPaused playing controls');
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content:url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content:url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls{
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content:url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content:url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</div>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

I have removed the div tags from the inside of you li tags as they did not serve any purpose except to complicate the HTML structure.
You could show a selected song in your play list and then wire up the previous and next buttons to do something.
Here is an example of how:
$(".song").on("click", function() {
$(".selected").removeClass("selected");
$(this).addClass("selected");;
})
$(".skipBack").on("click", function() {
var target = $(".song.selected").prev(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
$(".skipForward").on("click", function() {
var target = $(".song.selected").next(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.song.selected {
background: #aaaaaa;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content: url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content: url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls {
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content: url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content: url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

Codecademy flipboard code not working on my computer

I went through the Codecademy flipboard tutorial which basically just shows you how to put a .js file together for a carousel. I took the code from the website and created files on my computer.
I'm saving them as separate files on my computer in one folder. I've tried both pointing the file to a js file I downloaded from the js website (that I placed in the same folder) AND I tried using the website Codecademy provided as the source so I don't think that's the issue. I have each of the files saved separately as app.js, index.html, and style.css.
When I run it, it looks as it should but the the carousel isn't working. However, if I run it on Codecademy it runs perfectly. What gives? I'm just trying to understand the carousel fully and the interaction between .js .html and .css I'm also trying to build my own resume type website with a carousel but I can't do that until I fully understand each of these parts. Something Codecademy fails to do in my eyes.
app.js
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
index.html
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App
</li>
<li>Tutorials
</li>
<li>Magazines
</li>
<li>Web Tools
</li>
<li>Support
</li>
<li>Careers
</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community
</li>
<li>Our Blog
</li>
<li>Maps Blog
</li>
<li>Eng Blog
</li>
<li>Advertisers
</li>
<li>Publishers
</li>
<li>About Us
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
</a>
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>
style.css
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
Snippet:
var main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
}
$(document).ready(main);
/* General */
.container {
width: 960px;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 15px;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 20px;
padding-right: 20px;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
}
.dropdown-menu li a {
color: #898989;
padding: 6px 20px;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 9px;
padding-left: 0px;
padding-top: 9px;
}
.get-app li {
float: left;
margin-bottom: 5px;
margin-right: 5px;
}
.get-app img {
height: 40px;
}
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App
</li>
<li>Tutorials
</li>
<li>Magazines
</li>
<li>Web Tools
</li>
<li>Support
</li>
<li>Careers
</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community
</li>
<li>Our Blog
</li>
<li>Maps Blog
</li>
<li>Eng Blog
</li>
<li>Advertisers
</li>
<li>Publishers
</li>
<li>About Us
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png" width="540px">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
</a>
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared
and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png">
</a>
</li>
<li>
<a href="#">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png">
</a>
</li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png" width="540px">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</a>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script src="app.js"></script>
</body>
</html>

There are a few things missing in your code.
Adding this:
currentSlide.fadeOut(500).removeClass('active-slide');
nextSlide.fadeIn(500).addClass('active-slide');
below your if statement in your click event handler for arrow-next will do the trick.
See this fiddle: https://jsfiddle.net/6nbo8htt/

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.