Abstände von Left oder Right variabel angeben

Hallo zusammen,

ich habe einen Top-Link Button mit (position:fixed) eingebunden und kann ihm einen seitlichen Abstand mit einem festen Wert zuweisen. Wenn man aber diesen seitlichen Abstand variabel gestalten möchte damit Viewports mit unterschiedlichen Breiten es richtig darstellen habe ich bislang noch keine Lösung gefunden.
Gibt es eine Möglichkeit die Werte von Left oder Right abhängig von der Breite des Viewports anzugeben? Der Top-Link Button sollte beim Scrollen mitwandern. Die betreffende Webseite ist unter https://sub.musikverein-hirschzell.de/ zu finden.
Danke!


Gruß
Thomas

Zitat:

---

Zitat von Thomasge

Gibt es eine Möglichkeit die Werte von Left oder Right abhängig von der Breite des Viewports anzugeben?

---

Media-Queries sind eigentlich für so etwas gedacht oder habe ich Deine Frage vollkommen mißverstanden?

Ich würde das so umsetzen:

- damit .toplink_button immer innerhalb <main id="main"> verbleibt, würde ich:
- .toplink_button ein position: absolute; vergeben
- somit kannst du anstatt den via right: 15.625rem; rechts zu halten:
- via z.B. right: 30px; immer am rechten Rand halten ... egal wie breit der Viewport ist
- ggf. musst du dann noch den 'top'-Wert mit anpassen, da sich die absolute Position nun verändert hat

Ich setze bereits Media-Queries ein, aber ich kann mit denen das Problem leider nicht abfangen, zumindest weiß ich nicht wie.
Wenn ich z.B. das Media Query hernehme mit einer Breite von 1024 Pixel bis 1279 Pixel und einer festen Seitenbreite für die Webseiten von 1024 Pixel, dann würde der definierte Seitenabstand nur bei Viewports mit 1024 Pixel passen.
In meinem Fall habe ich ein 2-Spalten Layout mit rechter Spalte bei dem der Top-Link Button 240px nach links verschoben wird, damit dieser in der Main-Spalte am rechten Rand eingeblendet wird. Bei Viewports mit mehr als 1024 Pixel bis hin zu 1279 Pixel in der Breite würde der Top-Link Button immer weiter nach rechts in die rechte Spalte hinein verschoben werden.
Meine eigentliche Frage war, was man tun könnte damit der Top-Link Butten immer am rechten Rand der Main-Spalte eingeblendet wird unabhängig von der Breite des verwendeten Viewports. Daher kam mir die Idee mit der variablen Angabe vom rechten Seitenabstand für den Top-Link Button. Trotz meiner Recherchen konte ich hierzu nichts entsprechendes finden.
Danke!

Zitat:

---

Zitat von derRenner

Ich würde das so umsetzen:

- damit .toplink_button immer innerhalb <main id="main"> verbleibt, würde ich:
- .toplink_button ein position: absolute; vergeben
- somit kannst du anstatt den via right: 15.625rem; rechts zu halten:
- via z.B. right: 30px; immer am rechten Rand halten ... egal wie breit der Viewport ist
- ggf. musst du dann noch den 'top'-Wert mit anpassen, da sich die absolute Position nun verändert hat

---

Danke, das würde prinzipiell schon funktionieren, aber dadurch wandert der Top-Link Button beim Scrollen nach unten nicht mehr mit.

Wenn du die x-Position an #main festmachen willst und die y-Position an body, dann wird das wahrscheinlich Javascript erfordern.

Ich habe bereits ein Javascript dafür im Einsatz, damit der Button ausgeblendet wird und ein langsames hochscrollen möglich ist. Meine Versuche damit sind alle im Sand verlaufen weil CSS mit "position:fixed;" definiert ist. Anbei mein Javascript, vielleicht kann man dies so umbauen um mein Vorhaben realisieren zu können.

Code:

---

$(document).ready(function() {
  $('div.toplink_button').hide();
  $(window).scroll(function(){
    var value = 100;
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $('div.toplink_button').fadeIn();
    } else {
      $('div.toplink_button').fadeOut();
    }
  });
  $('div.toplink_button').click(function(){
    $('html, body').animate({scrollTop:'0px'}, 1000);
    return false;
  });
});

---

Warum hast Du mit Media Queries ein Problem?
Du kannst Dir dafür doch dort Media Queries setzen, wo Du sie brauchst.
Hier mal ein von der Positionierung her eher sinnfreies Beispiel, um zu verdeutlichen was ich meine

Code:

---

.toplink_button {
    position: fixed;
    width: 38px;
    height: 38px;
    right: 20px;
    bottom: 40px;
    z-index: 1000;
    cursor: pointer;
    border-radius: 25px;
    border: 1px solid #707070;
    background-image: url("/files/themes/musikverein/mvtheme0017-grafik-toplink-arrow.png");
}
@media only screen and (min-width:500px) {
  .toplink_button {
    right: 100px;
    bottom: 100px;
  }
}

@media only screen and (min-width:700px) {
  .toplink_button {
    right: 50%;
    bottom: 100px;
  }
}

@media only screen and (min-width:1200px) {
  .toplink_button {
    left: 20px;
    top: 1px;
  }
}

---