nav soll erst mitscrollen wenn nav den oberen Rand des Fensters berührt

EpicAlu

Hallo

Die betroffene Seite:
https://www.html-seminar.de/www.ghostinvalid.bplaced.net

Den navigations bereich habe ich mit
position:fixed;
angeheftet.

Es tut seinen Zweck aber würde um einiges schöner aussehen wenn der Bereich erst mitscrollt wenns nötig wird; wenn er den oberen Rand des Fensters erreicht.

Meine Idee:
Irgendwie müsste es doch möglich sein die navigation ganz nach oben zu verschieben aber das der Header berücksichtigt wird.

Bin Dankbar für alle Vorschläge :))

EpicAlu

HTML

<aside class="smcp">
				<nav>
					<ul>
						<li> <a class="active" href="index.html">Startseite</a></li>
						<li> <a href="members/nili.html">Band&shy;Mitglieder</a></li>
						<li> <a href="songs.html">Songs & Einblicke</a></li>
						<li> <a href="auftritte.html">Auftritte & Daten</a></li>

						<div class="box2"><h3>Social Media</h3>
							<a class="link2" href="https://www.youtube.com/channel/UC8FpgZI0L3op9STXvc4vdQw" target="_blank"> <h4>Unser <b>Youtube&shy;Kanal</b></h4></a>
							<a class="link2" href="https://www.facebook.com/ghostinvaelid/" target="_blank"><h4>Unsere <b>Facebook&shy;Seite</b></h4></a></div>
					</ul>
				</nav>
			</aside>

Alles anzeigen

CSS

aside{
	//clear:all;
	margin-top: 10px;
	float: left;
	text-align: center;
	width: 30%;
}
nav{
	//clear:all;
	position:fixed;
	//top: 10px;
	width: 30%;
	background: linear-gradient(to left bottom, rgba(50,50,50,0.8), rgba(22,128,25,0.8) 70%);
	background-color: #fff;
	border: 2px solid gray;
	border-radius: 8px;
	margin: 0px 0.5% 0% 0.5%;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	text-align: center;
}
nav ul{
	font-weight: 600;
}
ul{
	margin: 0;
	padding: 0;
	width: 100%;
	list-style-type: none;
	font-size: large;	
}
ul li a{
	font-size: 20px;
	text-decoration: none;
	color: #000;
	padding: 10px 10px;
	margin-bottom: 5px;
	background: linear-gradient(to left bottom, rgba(50,50,50,0.7), rgba(22,128,25,0.7) 70%);
	display: block;
	border: 1px solid gray;
	border-radius: 8px;
	box-shadow: 0px 10px 20px 0px gray;
}

Alles anzeigen

Sempervivum

Das geht relativ einfach:

Code

<script src="//code.jquery.com/jquery-1.10.2.js"></script>    <script>
        $(document).ready(function() {
            var topnav = $('nav').offset().top;
            $(document).on("scroll", function () {
                var scr = $("body").scrollTop();
                if (scr < topnav) $("nav").css("margin-top", -scr + "px");
            });            
        })     </script>

Füge das im Head deiner Seite ein.

EpicAlu

Zitat von Sempervivum

Das geht relativ einfach:

Hab das einfach genau so in den head der index.html gepackt... Ich nehme an das meintest du... Hat aber nicht funktioniert...

Muss ein script nicht im body stehn?

Geht das nicht auch ohne script?

Danke und LG
EpicAlu

Sempervivum

Hm, ich hatte es getestet und es hatte bei mir funktioniert. Nein, es kann ruhig im Head stehen, da der Code für document-ready ausgeführt wird. Lade es doch mal hoch, damit man es testen kann. Sicher lässt sich der Fehler leicht finden.
Leider kenne ich keine Lösung ohne Javascript.

EpicAlu

Ich habs jetzt mal so drin... Erstmals nur bei der Startseite...
https://www.html-seminar.de/www.ghostinvalid.bplaced.net
Hat sich glaub ich nichts verändert...

Versteh aber auch deinen code nicht... Bin blutiger anfänger

Sempervivum

?? Da sehe ich im Quelltext nichts von dem Skript. Hast du es editiert und hoch geladen?
Edit: Doch, die alte Seite war bei mir wohl noch im Cache. Sehe es mir jetzt an ...
Edit2: Bei mir funktioniert's.

Jetzt mitmachen!