Ergebnis 1 bis 2 von 2
  1. #1
    Soelg ist offline Grünschnabel
    registriert
    21-05-2017
    Beiträge
    2

    OnePage scrollen

    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-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() {
    				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>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.681

    AW: OnePage scrollen

    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>

Ähnliche Themen

  1. [JQUERY] Mit scrollTop: langsames gleiten / typisch onepage Seiten
    Von LikeStar im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 20-05-2015, 12:05
  2. OnePage Parallax - Hilfe
    Von rle im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 19-08-2013, 08:53
  3. Scrollen
    Von Da_Haiz im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-04-2008, 22:12
  4. Antworten: 3
    Letzter Beitrag: 09-02-2008, 14:29
  5. div scrollen
    Von B5two im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 23-07-2005, 22:22

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •