Erstellen eine klebrige Fußzeile in React

Bei der Entwicklung moderner Anwendungen müssen wir die Aufmerksamkeit der Benutzer oft auf etwas Wichtiges lenken oder erklären.

Dies kann durch Erstellen einer klebrigen Fußzeile erreicht werden. Wie der Name schon sagt, bleiben klebrige Fußzeilen am unteren Rand der Benutzeransicht und bleiben dort, auch wenn die Benutzer scrollen.

Haftende Fußzeilen sind besonders nützlich, wenn Sie eine lange scrollbare Seite haben, aber eine Benutzeroberfläche anzeigen möchten, bevor Benutzer das Ende der Seite erreichen.

Mit ein wenig CSS-Magie und grundlegenden HTML-Kenntnissen können Sie auch in React eine klebrige Fußzeile erstellen.

Verwenden von regulärem CSS und React zum Erstellen einer klebrigen Fußzeile in React

Das Erstellen einer klebrigen Fußzeile in React ist komplexer, als einfach ein div zu erstellen und seine Position unten zu fixieren; Das Setzen einer Eigenschaft position:fixed auf einem div ist ein guter Anfang, aber nicht genug.

Das Problem mit dem festen Wert ist, dass er das Element aus dem normalen Dokumentenfluss entfernt. Wenn sich also unten auf Ihrer Seite ein UI-Element oder Text befindet, überlappt es mit dem klebrigen div.

Trotz dieses Mankos ist immer noch position:fixed notwendig, um einen Sticky Footer zu erstellen.

Die Lösung besteht darin, einen Wrapper div zu erstellen (ein div-Element, das Platz im Dokumentenfluss einnimmt). Wenn Sie ein solches div erstellen, können Sie Platz für die klebrige Fußzeile reservieren, damit sie sich nicht mit regulären HTML-Elementen überschneidet.

Schauen wir uns den Code an:

function StickyFooter({ children }) {
  let regularDiv = {
    backgroundColor: "black",
    borderTop: "2px solid red",
    textAlign: "center",
    padding: "40px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "80px",
    width: "100%",
}
let wrapperDiv = {
  display: 'block',
  padding: '40px',
  height: '80px',
  width: '100%',
}
    return (
        <div style={{height: "200vh"}}>
            <div style={wrapperDiv} />
            <div style={regularDiv}>
                { children }
            </div>
        </div>
    )
}

Hier definieren wir ein Sticky div und ein Wrapper div, um Platz dafür zu reservieren. Auf diese Weise verdeckt das klebrige div keinen Teil Ihrer Seite.

Sie können die Requisiten auch wie im Beispiel destrukturieren. Alle Elemente, die Sie zwischen den öffnenden und schließenden Tags der StickyFooter-Komponente platzieren, werden in den Sticky Footer eingefügt.