Objekte bis zu einem bestimmten Punkt scrollen. Anschließend fest fixiert

Bisch schrieb am 13.12.2014 um 10:30 Uhr

 Ich habe eine zusätzliche einfache NAV seitlich, und möchte daß sich diese bis zu einem bestimmten Punkt mitscrollt. Sie sollte beim scrollen erst oben an der Bildkante stehenbleiben, damit auch wirklich keine Inhalte der NAV bei kleineren Bildschirmen verloren gehen. Es würde auch optisch besser aussehen wenn die Lücke beim scrollen nach oben geschlossen ist. Ich kenne mich mit Codes leider nicht so aus und hoffe ihr könnt mir helfen.Bis jetzt hab ich es so gemacht: Eine neue Ebene als Platzhalter erstellt und in diese Ebene meine zu fixierenden Objekte oder Text eingefügt.Im body code eingestellt.

</div></a></div></div><div style="position:fixed;top:0px"><div><a><div>

Bei diesem code bleiben jedoch meine Objekte von Anfang an fixiiert. vielleicht kann mir jemand helfen, wenn es überhaupt möglich ist, daß sich das in Xara ProX10 einfach regeln lässt. Ich hoffe Ihr könnt mir helfen 

Grüße an alle und frohe Weihnachten wünscht euch

Bisch

Kommentare

BilderMacher schrieb am 13.12.2014 um 11:12 Uhr

Wenn du die Suche hier auf magix.info nutzt und nach "fixierter Navigation" suchst, könnten Antworten schon dabei sein, die dir helfen.

http://www.magix.info/de/suche/fixierter+Navigation/

Ausgehend von dieser Frage und der Antwort von @BeRo, kommst du auch zu weiteren, gleichgelagerten Fragen mit entsprechenden Anleitungen für die Umsetzung:

http://www.magix.info/de/navigationsleiste-die-von-einer-bestimmten-stelle-auf-der-site.wissen.1085974.html

 

Es ist auf jeden Fall ein sehr viel besprochenes Thema - mit vielen Hinweisen!

Zuletzt geändert von BilderMacher am 13.12.2014, 11:12, insgesamt 1-mal geändert.

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

Bisch schrieb am 14.12.2014 um 21:42 Uhr

Danke Bildermacher,

Ich habe deinen Rat befolgt, und es funktioniert auch einwandfrei wie von BeRo beschrieben. Jetzt aber mein Problem. Die Platzierung der Navbar liegt seitlich außerhalb, ich möchte sie jedoch direkt auf der Seite an einem fixen Ort platziert haben. Wenn ich die Pixel- bzw. Prozentangabe bei left so ändere daß sich die Navbar direkt im Seitenbereich liegt bezieht sich der Ausgangspunkt immer auf den linken Rand des Browserfenster. Je nach Browser verschiebt sich meine Navbar  dadurch ungünstig. Jetzt noch eine frage: Kann man den Ausgangspunkt der Navbar auch direkt auf den Seitenbereich beziehen, oder gibt es dafür eine ganz andere Methode? Noch kurz: scrollen und erst am oberen Ende fixiert.  Ich verwende im Moment folgenden body Code:

<div id="NavBar" style="position:absolute; top: 380px; left:25%;">

<iframe src="grafika.htm" name="NavBar" width="188px" height="356px" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"> </iframe>
</div>

<script>
var menu = document.getElementById('NavBar'),
menufixed = 0,
logoHeight = 190;
window.onscroll = onScroll;
function onScroll(e) {
var spy = getScrollY();
if (spy <= logoHeight) {
if (menufixed) {
menu.style.position = 'absolute';
menu.style.top ='300px';
menufixed = 0;
}
} else {
if (!menufixed) {
menu.style.position = 'fixed';
menu.style.top ='10px';
menufixed = 1;
}
}
}
// source: http://www.ajaxschmiede.de/javascript/fenstergrose-und-scrollposition-in-javascript-auslesen/
function getScrollY() {
var spy = 0;
if(typeof(window.pageYOffset) == 'number')
spy = window.pageYOffset;
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
spy = document.body.scrollTop;
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
spy = document.documentElement.scrollTop;
return spy;
}
</script>
</body>

</html>

Ich hoffe Ihr habt eine Lösung.

MfG

Bisch

BeRo schrieb am 15.12.2014 um 00:00 Uhr

[...] Kann man den Ausgangspunkt der Navbar auch direkt auf den Seitenbereich beziehen [...]

Indirekt geht das, wenn Du die von Dir schon getestete "%" Variante in der DIV Box um ein weiteres Statement ergänzt.

So kann das dann aussehen:

------------------------
<div id="NavBar" style="position:absolute; top: 200px; left:50%; margin-left: -400px;">
-----------------------

Die Ergänzung ist oben gelb markiert.

Mit "left:50%;" legst Du die Position der NavBar auf die horizontale Mitte der Seite, die ja unabhängig von der Größe der Seite oder des Browser Fensters ist.
Mit "margin-left: -400px;" definierst Du dann den Versatz nach links, der i. d. R. die Hälfte der Seitenbreite haben sollte. Damit wird die NavBar dann mit dem linken Rand der Seite "verheiratet". Im Beispiel habe ich mit 400px die Hälfte einer 800px breiten Seite angenommen.

Die Position ist weitestgehend unabhängig von der Größe des Browser Fensters. Nur, wenn das Browser Fenster schmaler wird, als die Seitenbreite es zulässt, kann die NavBar nach links aus dem Fenster hinaus wandern...

Wenn Du mit den o. a. Zahlen ein bisschen "spielst", kannst Du den Effekt ggf. etwas kompensieren.

Probier's mal...

Viel Erfolg

Zuletzt geändert von BeRo am 15.12.2014, 00:00, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Bisch schrieb am 15.12.2014 um 10:44 Uhr

Danke BeRo,

du hast mein Problem gelöst. Super! Daß die NavBar eventuell nach links aus der Seite wandert nehme ich gerne in Kauf, da sich meine Hauptnavigation horizontal oben befindet und der User über diese auch zum Ziel kommt. Es verschwinden keine sehr wichtigen Verlinkungen wie z.B auf Impressum aus dem Seitenbereich. Ich finde es einfach optisch schöner wenn die lücke nach oben geschlossen ist und das navigieren über die Scrollseite ist für den Besucher eine bequeme Sache. 

Übrigens: Ich erstelle meine Website mit dem Xara Designer Pro X10 und durch das neue Web Authoring/ Web Publishing kann ich mit wenig Aufwand meine Website für Smartphone und Tablet erstellen. Ich bin absoluter Laie und trotzdem leicht zu verwirklichen. Deshalb auch nicht das Problem mit dem seitlichen verschwinden der NavBar, hierfür erstell ich dann sowieseo eine Smartphone/Tablet- Variante mit nur einer Hauptnavigation.

Danke nochmal BeRo Bildermacher für eure Hilfe

MfG

Bisch

AndrewW schrieb am 25.05.2020 um 07:15 Uhr

Hallo Zusammen,

ich werde aus dem Beispiel nicht schlau bzw. mein Kopf blockiert schon 😟

Auf meiner Seite möchte ich gerne, dass nicht nur das Logo und und der graue Balken oben fixiert werden, sondern auch beim scrollen nach oben die "rote Linie" und die darunter liegende "Navi-Bar" bei 54px stehen bleibt. Alles was drunter kommt soll weiter gescrollt werden.

Hoffe, habe mich verständlich ausgrdückt 😬
Danke vorab für die Hilfe!