Navigation die mit nach unten Scrollt

[BennX]

Hey liebe Community,
Ich wollte die Navigation auf meiner Seite so einrichten, dass sie mit nach unten geht, wenn man nach unten scrollt.

Probiert zu lösen habe ich es indem ich #left fixed Position setze. Allerdings treten dann Probleme auf. Hierbei verschwindet allerdings die Navigation wenn man eine geringe Auflösung hat und nach rechts skrollt.
Insbesondere geht dieses auf Smartphones/Tablets beim zoomen schief.

Könnt ihr mir eventuell helfen wie ich dieses lösen kann?

Liebe Grüße
BennX

[BennX]

Hat da keiner eine Lösung für?
Oder ist es so einfach, dass keiner Antworten möchte?


Liebe Grüße
Benjamin

[schman]

Eine Lösung ohne Link ist schwer möglich, da es nur eine Raterei wäre.
Kannst du mal einen Link posten?

[Messa]

Wenn ich das richtig verstehe meiinst du eine Navi die dem Scroll ab einem gewissen Punkt folgt.
Wie bei FB die rechte Spalte.

Wenn ja das geht mit Javascript.

Bei 145 wird die CSS geändert.
style.top = '55px'; wird 55px von anfangan hintergrückt, da ich Oben noch ein
Top Navi habe.

<script type="text/javascript">
window.onscroll = function()

{

	if( window.XMLHttpRequest ) {

		if (document.documentElement.scrollTop > 145 || self.pageYOffset > 145) {

			$('menu').style.position = 'fixed';

			$('menu').style.top = '0';
                        
                        $('menu').style.left = '0';

		} else if (document.documentElement.scrollTop < 145 || self.pageYOffset < 145) {

			$('menu').style.position = 'absolute';

			$('menu').style.top = '55px';
                        
                        $('menu').style.left = '0';

		}

	}

}
</script>

Oder wenn es sexy sein soll

http://davidwalsh.name/dw-content/scrolling-sidebar.php

lg Matthias

[BennX]

Erstmal auf die schnelle www.bennx.de .

Ich weiß nicht wie das mit Javascript geht. Ich hatte vor kurzem versucht eines einzubinden welches mir aber nicht gelang da die Seite dann gar nicht mehr gezeigt wurde.
tag <script> freigeben und dadrunter dann das Skript von dir einfügen? (in das javaskript feld in Themes unter seitenlayout? So verschiebt er das Feld sobald man ein stück nach unten gescrollt hat. Dieses verhindert allerdings nicht, dass man wenn man das Fenster klein macht und nach rechts scrollt die navigation verschwindet hinter der main)
Ich habe das Skript nun auf left bezogen da die komplette linke seite einfach so "bleiben soll".

<script type="text/javascript">
window.onscroll = function()
{
	if( window.XMLHttpRequest ) {
		if (document.documentElement.scrollTop > 145 || self.pageYOffset > 145) {
			$('left').style.position = 'fixed';
			$('left').style.top = '150px';

		} else if (document.documentElement.scrollTop < 145 || self.pageYOffset < 145) {
			$('left').style.position = 'absolute';
			$('left').style.top = '30px';
		}
	}
}
</script>

Allerdings beim hochscrollen bleibt es bei 30px.
Ich denke ich muss mir dass noch etwas genauer angucken und anpassen. Ich glaube ich brauch dann einen pageXOffset wenn es soetwas gibt. Da beim nach rechtsskrollen die navigation ja nun eigentlich links normal neben der seite bleiben soll. Auch wenn ich bereits auf der Seite weiter ungen bin.

Und ja es ist korrekt es ist gedacht wie bei facebook quasi. Da einige artikel von mir länger werden/sind ist es halt praktisch wenn die Navigation mit nach unten rückt.

Am schönsten wäre es natürlich wenn es erst nach den 150px die ich im header habe einfach oben am Fester fixed bleibt. Dieses geht mit dem Skript ja problemlos. Dieses löst aber das Problem mit dem nach rechts gehen nicht.
Liebe Grüße
Benjamin

[Messa]

Du hast meine Script bisschen falsch angewendet.
Es geht bei dem Script darum,
Das die Navigation beim Start auf einen bestimmt wert ist.
und sobald die scollhöhe erreicht wird soll positon: fixed top 0 sein.
Dan pickt die Navi oben am Rand des Browsers.
Wie bei Facebook.

Das Problem mit dem verschwieden solltest du so lösen können.
Gibt dem Menü über das Modul ein ID ein z.b navileft.

Dann gibst du #left eine Braite so das das Manü platz hat.

Und im Javascript setzt du nicht left sondern navileft.


lg Matthias

[BennX]

<script type="text/javascript">
window.onscroll = function()
{
	if( window.XMLHttpRequest ) {
		if (document.documentElement.scrollTop > 145 || self.pageYOffset > 145) {
			$('left').style.position = 'fixed';
			$('left').style.top = '0';
                        $('menu').style.left = '0';
		} else if (document.documentElement.scrollTop < 145 || self.pageYOffset < 145) {
			$('left').style.position = 'absolute';
			$('left').style.top = '150px';
                        $('menu').style.left = '0';
		}
	}
}
</script>

So bleibt das Menü genau so stehen wie ich es mir vorgestellt habe. Allerdings kann man nun wenn man Runtergescrollt hat weiterhin das Menü verschwinden lassen.
Left hat eine Breite von 200. Und es macht keinen unterschied ob ich es nur auf navigation beziehe oder auf komplett left. Der fehler bleibt weiterhin bestehen.
Snip im anhang.

Liebe Grüße

[Messa]

Du musst auch left aus dem Java raus nehmen
Habe ich ja geschrieben.

Setze beim Menü eine ID rein.
Und dann verwende diese ID im Java und NICHT left.

Danach per CSS left eine fixe breite geben.

Damit du es verstehst.
Durch die Positionierung ist der linken Bereiches immer über dem Main bereich.
Wenn du aber nur das Menü positioniert und dem linken Bereich eine fixe Breite
gibst kann es nicht mehr verscheinden, denn left hält dann den Abstand.

lg

[BennX]

Okay so lässt sich das eigentliche Problem nicht lösen. Allerings kann man so einen schönen Lauf der Elemente erzäugen. Siehe www.bennx.de beim runterscrollen.

Das Problem ist halt, dass man am Rechner zwar selten eine auflösung unter 1024px hat. Allerdings treten auf jedem Mobielen Gerät starke Probleme auf sofern ich dieses so löse.

Liebe Grüße und danke für eure Hilfen.

[Messa]

Vielleicht mit Postioniereung bisschen herumspielen.
Left: relative.
und dann statt fixed absolute

und vielleicht mir - top werten Arbeiten, da bin ich mir aber nichts sicher ob das jeder Browser
verkraftet.

Oder du baust ein "Back to the Top" rein, dann kann der User unten dann nach oben Scrollen lassen.

[BennX]

Vielleicht mit Postioniereung bisschen herumspielen.
Left: relative.
und dann statt fixed absolute

und vielleicht mir - top werten Arbeiten, da bin ich mir aber nichts sicher ob das jeder Browser
verkraftet.

Oder du baust ein "Back to the Top" rein, dann kann der User unten dann nach oben Scrollen lassen.

Ja also mit left relativ und die sidebar auf absolut setzen funktioniert alles nicht. Man kann weiterhin das Element in main ziehen da left die module nicht in sich behält würde ich fast sagen.

Liebe Grüße

[Messa]

Also bitte,

So was funktionier siche

#left {
    position: relative;
}
#sidebar {
    position: absolute;
}

So verschindet es auch nicht mehr.
Vielleicht gehts wenn man den Script bischen adaptiert.
so das er automatisch top mit dem Browserscrollwert befühlt.

Aber so auf die schnell habe ich keine Lösung.

lg

[Messa]

Kannst du vielleicht nochmals schnell den JavaScript reinmachen?
Habe eine Idee.
DAzu brauche ich aber den aktiven Javascript dann kann ich in Firebug mal guggen

[BennX]

Also bitte,

So was funktionier siche

#left {
    position: relative;
}
#sidebar {
    position: absolute;
}

So verschindet es auch nicht mehr.
Vielleicht gehts wenn man den Script bischen adaptiert.
so das er automatisch top mit dem Browserscrollwert befühlt.

Aber so auf die schnell habe ich keine Lösung.

lg

Es verschindet trotz den werten weiterhin.

Also werde ich dieses nun einfach statisch auf der Seite lassen und es Skrollt halt nicht mit Runter.

[BennX]

Problem Gelöst Dank einem moo_slider.

<script>
var ScrollSidebar = new Class({
  
  Implements: [Options],
  
  options: {
    offsets: { x:0, y:0 },
    mode: 'vertical',
    positionVertical: 'top',
    positionHorizontal: 'right',
    speed: 400
  },
  
  initialize: function(menu,options) {
    /* initial options */
    this.setOptions(options);
    this.menu = $(menu);
    this.move = this.options.mode == 'vertical' ? 'y' : 'x';
    this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';
    /* ensure a few things */
    var css = { position: 'absolute', display:'block' };
    css[this.options.positionVertical] = this.options.offsets.y;
    css[this.options.positionHorizontal] = this.options.offsets.x;
    this.menu.setStyles(css).set('tween',{ duration: this.options.speed });
    /* start listening */
    this.startListeners();
  },
  
  startListeners: function() {
    var action = function() {
      this.setPosition($(document.body).getScroll()[this.move] + this.options.offsets[this.move]);
    }.bind(this);
    window.addEvent('scroll',action);
    window.addEvent('load',action);
  },
  
  setPosition: function(move) {
    this.menu.tween(this.options[this.property],move);
    return this;
  }
});

/* usage */
window.addEvent('domready',function() {
  $('sidebar-menu').set('opacity',0.8); //opacity effect for fun
  var sidebar = new ScrollSidebar('sidebar-menu',{
    offsets: {
      x: 0,
      y: 0
    }
  });
});
</script>

Das sidebar-menu tag wird somit geslidet und um 0,0 versetzt.

Liebe Grüße und Danke dir nochmal für die Hilfe beim einbinden des moo_tools

[AndreasC]

Hallo also ich habe heute das selbe probiert und trotz des Codes hier komme ich nicht weiter,
Ich habe in #left ein Modul Navigation eingesetzt.
Dem Modul die ID sidebar-menu zugewiesen und diese ID auch im JS Code verwendet welchen ich includiert habe.

<script>
var ScrollSidebar = new Class({
  
  Implements: [Options],
  
  options: {
    offsets: { x:0, y:0 },
    mode: 'vertical',
    positionVertical: 'top',
    positionHorizontal: 'right',
    speed: 400
  },
  
  initialize: function(menu,options) {
    /* initial options */
    this.setOptions(options);
    this.menu = $(menu);
    this.move = this.options.mode == 'vertical' ? 'y' : 'x';
    this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';
    /* ensure a few things */
    var css = { position: 'absolute', display:'block' };
    css[this.options.positionVertical] = this.options.offsets.y;
    css[this.options.positionHorizontal] = this.options.offsets.x;
    this.menu.setStyles(css).set('tween',{ duration: this.options.speed });
    /* start listening */
    this.startListeners();
  },
  
  startListeners: function() {
    var action = function() {
      this.setPosition($(document.body).getScroll()[this.move] + this.options.offsets[this.move]);
    }.bind(this);
    window.addEvent('scroll',action);
    window.addEvent('load',action);
  },
  
  setPosition: function(move) {
    this.menu.tween(this.options[this.property],move);
    return this;
  }
});

/* usage */
window.addEvent('domready',function() {
  $('sidebar-menu').set('opacity',0.8); //opacity effect for fun
  var sidebar = new ScrollSidebar('sidebar-menu',{
    offsets: {
      x: 0,
      y: 0
    }
  });
});
</script> 

Leider scrollt das Menu denoch nicht mit, fehlt mir etwas?

Grüße

[Rentier06]

Vielleicht schaust Du mal hier: www.scse.de
Fals das Dein Lösungwunsch ist... das funktioniert völlig ohne javascript. Reines css.
Viele Grüße vom
Rentier

[AndreasC]

Hallo rentier06,

verhält sich die Navi genauso wie per Javascript und scrollt mit wenn die Seite nach unten gescrollt wird, etwa wie hier:

http://www.profilepicture.co.uk/demos/stickybox/

Gerne würde ich das Script selbst einbauen nur bin ich noch recht frisch in Contao und verstehe noch nicht wirklich alle Zusammenhänge.
Z.B. ob wo es möglich ist ein Div in den Linken Block zu setzen in dem die Navi mitscrolled?

Edit: Ah sehe gerade dein Script scrollt den Content falls dieser länger wird, ich würde jedoch nur die Seite normal runterscrollen und die Navi fix setzten bzw. mitsliden lassen nach unten oder oben.

EDIT: Habs hinbekommen, danke für den Support hier.