• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] OnePage scrollen

S

Soelg

New member
Hallo Javascript Freunde,

wer kann mir bitte bei dem folgendem Script helfen?

Beim Anklicken der Navilinks soll auf die entsprechende Seite gesprungen werden und beim Scrollen der Seiten sollen die Navilinks angezeigt werden, damit man weiß, wo man sich gerade befindet.

Besten Dank schon einmal im voraus!!

Soelg


HTML: 
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnePage</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
	
	<script>
		$(document).ready(function() {
			//jQuery Script Beginn
			
			§(window).scroll(function() {
				var currentPosition = $(window).scrollTop();
				if(currentPosition >= $("#home").offset().top) && currentPosition <= $("#news").offset().top) {
					$(".navLink").removeClass("Selected").addClass("notSelected");
					$("#link1").removeClass("notSelected").addClass("Selected");
				}
			});
			
			$("#link1").click(function() {
				$("html, body").animate({
					scrollTop: $("#home").offset().top
				}, 1000;
			});
			//jQuery Script Ende
		});
	</script>   
	</head>
	  	<style>
		  	html, body {
			  	height: 100%;
		  	}
		  	#navigationBar {
			  	position: fixed;
			  	float: left;
			  	text-align: center;
			  	background-color: #333333;
			  	color: #e8e8e8;
			  	height: 100vh;
			  	width: 20%;
		  	}
		  	.navLink {
			  	margin-bottom: 1em;
			  	cursor: pointer;
		  	}
		  	#link1 {
			  	margin-top: 50%;
		  	}
		  	#home, #news, #kontakt, #impressum {
			  	height: 100vh;
			  	margin-top: -1.5em;
		  	}
		  	#mainContent {
			  	float: right;
			  	width: 80%;
		  	}
		  	#mainContent h1, p {
			  	padding: 1em;
		  	}
  		</style>
	<body>
		<div id="navigationBar">
			<div class="navLink" id="link1" class="notSelected">Home</div>
			<div class="navLink" id="link2" class="notSelected">News</div>
			<div class="navLink" id="link4" class="notSelected">Kontakt</div>
			<div class="navLink" id="link5" class="notSelected">Impressum</div>
		</div>
		
		<div id="mainContent">
			<section id="home" style="background-color: #6298A0">
				<h1>Strartseite</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing sed do eiusmod tempor incididunt ut labore et dolmaliqua.
					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
					<br />Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum.
					</p>
			</section>
			
			<section id="news" style="background-color: #d1c162">
				<h1>Neuigkeiten</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing sed do eiusmod tempor incididunt ut labore et dolomaliqua.
					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
					<br />Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum.
					</p>
			</section>
						
			<section id="kontakt" style="background-color: #70be79">
				<h1>Kontakt</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicinelit sed do eiusmod tempor incididunt ut labore et dolomaliqua.
					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
					<br />Excepteur sint occaecat cupidatat non proiden  sunt culpa qui officia deserunt mollit anim id est laborum.
					</p>
			</section>
			
			<section id="impressum" style="background-color: #625f54">
				<h1>Impressum</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicinelit, sed do eiusmod tempor incididunt ut labore et domaliqua.
					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
					<br />Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum.
					</p>
			</section>
		</div>
	</body>
</html>
 
Du musst dir angewhöhnen, in die Fehlerkonsole zu schauen. Du hast Syntaxfehler!

Code: 
        <!DOCTYPE html>
        <html lang="de">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>OnePage</title>
        	<link rel="stylesheet" type="text/css" href="styles.css">
        	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
        	
        	<script>
        		$(document).ready(function() {
        			//jQuery Script Beginn
        			
        			$(window).scroll(function() {
        				$(".navLink").removeClass("Selected").addClass("notSelected");
        				var currentPosition = $(window).scrollTop();
        				if(currentPosition >= $("#home").offset().top && currentPosition <= $("#news").offset().top) {
        					$("#link1").removeClass("notSelected").addClass("Selected");
        				}
        			});
        			
        			$("#link1").click(function() {
        				$("html, body").animate({
        					scrollTop: $("#home").offset().top
        				}, 1000);
        			});
        			//jQuery Script Ende
        		});
        	</script>   
        	</head>
        	  	<style>
        		  	html, body {
        			  	height: 100%;
        		  	}
        		  	#navigationBar {
        			  	position: fixed;
        			  	float: left;
        			  	text-align: center;
        			  	background-color: #333333;
        			  	color: #e8e8e8;
        			  	height: 100vh;
        			  	width: 20%;
        		  	}
        		  	.navLink {
        			  	margin-bottom: 1em;
        			  	cursor: pointer;
        		  	}
        		  	#link1 {
        			  	margin-top: 50%;
        		  	}
        		  	#home, #news, #kontakt, #impressum {
        			  	height: 100vh;
        			  	margin-top: -1.5em;
        		  	}
        		  	#mainContent {
        			  	float: right;
        			  	width: 80%;
        		  	}
        		  	#mainContent h1, p {
        			  	padding: 1em;
        		  	}
          		</style>
        	<body>
        		<div id="navigationBar">
        			<div class="navLink" id="link1" class="notSelected">Home</div>
        			<div class="navLink" id="link2" class="notSelected">News</div>
        			<div class="navLink" id="link4" class="notSelected">Kontakt</div>
        			<div class="navLink" id="link5" class="notSelected">Impressum</div>
        		</div>
        		
        		<div id="mainContent">
        			<section id="home" style="background-color: #6298A0">
        				<h1>Strartseite</h1>
        					<p>Lorem ipsum dolor sit amet, consectetur adipisicing sed do eiusmod tempor incididunt ut labore et dolmaliqua.
        					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
        					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
        					<br />Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum.
        					</p>
        			</section>
        			
        			<section id="news" style="background-color: #d1c162">
        				<h1>Neuigkeiten</h1>
        					<p>Lorem ipsum dolor sit amet, consectetur adipisicing sed do eiusmod tempor incididunt ut labore et dolomaliqua.
        					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
        					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
        					<br />Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum.
        					</p>
        			</section>
        						
        			<section id="kontakt" style="background-color: #70be79">
        				<h1>Kontakt</h1>
        					<p>Lorem ipsum dolor sit amet, consectetur adipisicinelit sed do eiusmod tempor incididunt ut labore et dolomaliqua.
        					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
        					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
        					<br />Excepteur sint occaecat cupidatat non proiden  sunt culpa qui officia deserunt mollit anim id est laborum.
        					</p>
        			</section>
        			
        			<section id="impressum" style="background-color: #625f54">
        				<h1>Impressum</h1>
        					<p>Lorem ipsum dolor sit amet, consectetur adipisicinelit, sed do eiusmod tempor incididunt ut labore et domaliqua.
        					<br />Ut enim ad minim veniam, quis nostrud exercitation laboris nisi ut aliquip ex ea commodo consequat.
        					<br />Duis aute irure dolor in reprehenderit in voluptate esse cillum dolore eu fugiat nulla pariatur.
        					<br />Excepteur sint occaecat cupidatat non proident, culpa qui officia deserunt mollit anim id est laborum.
        					</p>
        			</section>
        		</div>
        	</body>
        </html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben