WBCE CMS Forum

jonny

Mitglied

Einfaches mitscrollen

Hallo Leute

Ich bin momentan mit dem Umbau von Hortal beschäftigt und wollte nun, etwas wichtiges ändern.

Das Menü sowie das Logo sollten biem Scrollen "fixed" bleiben. So das der Kunde jederzeit Zugriff hat auf das menü.

Wie setze ich es bei diesem Design am besten Um? https://sonnen-wetterschutz.ch/

Liebe Grüsse

Jonny

---

Wer noch etwas Dummheit will soll sich hinten anstellen..

florian

Administrator

Re: Einfaches mitscrollen

Schau mal hier
http://stickyjs.com/
http://leafo.net/sticky-kit/

Beispielumsetzung mit stickyjs im Template Lesefaken:
https://wbce.at/tpls/template-lesefaken.html

jean

Mitglied

Re: Einfaches mitscrollen

... oder noch etwas auf IE warten ;)

https://caniuse.com/#feat=css-sticky

jonny

Mitglied

Re: Einfaches mitscrollen

Ich habe nun trotzdem das Theme lesefaken gewählt.

Das Problem ist nun aber, das mir das ganze Layout nach rechts springt wenn ich die seite scrolle.

Woran kann das liegen?

---

Wer noch etwas Dummheit will soll sich hinten anstellen..

florian

Administrator

Re: Einfaches mitscrollen

Der generierte Sourcecode sieht so aus:

<header>



			<div class="fg5 logo">
					<a href="https://sonnen-wetterschutz.ch"><img src="/templates/lesefaken/logo.png" alt="Sonnen-Wetterschutz Fiorito" border="0" /></a>
				</div>
			
	<nav role="navigation" id="main-nav">
		<div class="menu">
			<div class="row orow">					
			<input id="main-menu-state" type="checkbox" />
			<label class="main-menu-btn" for="main-menu-state">
			<span class="main-menu-btn-icon"></span> Toggle main menu visibility
			</label>			
				<ul id="main-menu" class="sm sm-clean">[...]</ul>	
			</div>
		</div>
		

		<div class="center">
			<div class="row">
				
				<div class="fg7 meta fg-no-mobile">
					&nbsp;	
				</div>	
				
			</div>			
		</div>
	</header>
	
					
	</nav>

D.h. da wird <header> und dann <nav> geöffnet, aber dann erst <header> und dann <nav> geschlossen - Syntaxfehler. Das bringt das sticky-Script vermutlich aus dem Konzept.

Tipp: In Firefox mit Strg-U in die Quelltextansicht wechseln. Wenn da einzelne Tags in rot angezeigt werden, Mauszeiger darüber platzieren, dann erscheint als Tooltip, was Firefox daran stört. Das ist zwar nicht immer zutreffend, hilft aber oft weiter.

jonny

Mitglied

Re: Einfaches mitscrollen

Das hat mir leider noch nicht weitergeholfen, das ganze hopst immernoch rum

---

Wer noch etwas Dummheit will soll sich hinten anstellen..

florian

Administrator

Re: Einfaches mitscrollen

Im unveränderten Template Lesefaken tritt das Problem nicht auf - nur zur Klarstellung für Zufallsbesucher dieses Threads.
Lesefaken baut auf dem CSS-Grid Fitgrid auf. Das Prinzip des CSS-Grids ist, dass alle Elemente in Reihen strukturiert sind, in denen wiederum so viele Elemente in einem Div der Klasse fg1 bis fg12 liegen, bis sie in der Summe genau 12 ergeben.  Also etwa so:

<div class="row">
      <div class="fg5">
           ...
      </div>
      <div class="fg7">
           ...
       </div>
</div>

oder auch

<div class="row">
     <div class="fg12">
           ....
      </div>
</div>

Bei Dir liegt nun die Navigation neben einem Div mit der Klasse fg5 ohne weiteren Div drumherum und wird zwar erstmal gefloatet. Aber dann kommt das Sticky-Script ins Spiel, das dann durch die Manipulation der float- und position-Formatierung die Navigation oben festtackert. Dadurch kommt es zum (folgerichtigen) Sprungeffekt.
Es müsste helfen, die <nav> ...</nav> in einem <div class="fg7">...</div> einzubinden.