JS: Scroll on-Function bei Page Reload?

Hallo zusammen,

Ich habe auf meiner Testhomepage mittels php eingestellt, wie sich der fixed header und die Elemente innerhalb verschieben & verkleinern sollen, wenn ich scrolle.

Das klappt auch alles einwandfrei! Problem ist nur dass wenn ich von oben nach unten scrolle, wird der Header so wie er es soll kleiner.

Wenn ich die Seite jetzt neu lade, wird mir aber erstmal wieder der große Header angezeigt, obwohl meine Scrollposition schon tiefer ist. Wie kann ich direkt bei Page-Reload die Funktion ausführen (ohne scrollen)?

Muss ja irgendwie mit PageYOffset gehen.

Danke im Voraus

4 Antworten

RainDrop123123

10.07.2018, 09:20

Du veränderst mit PHP Positionen von HTML Elementen?

document.body.scrollTop

Gibt einen Pixel-Wert zurück. Ist dieser 0, wurde nicht gescrollt.
Hier kannst du also bei Reload immer prüfen, ob man sich ganz oben auf der Seite befindet, oder bereits gescrollt hat.

Dennisthek1nq

Fragesteller

10.07.2018, 10:39

ja responsive mit verschiedenen Höhen und Breiten...
Aber danke dir für deine Antwort, war hilfreich

RainDrop123123

10.07.2018, 13:01

@Dennisthek1nq

Aber doch nicht mit PHP, sondern media queries in css

Dennisthek1nq

Fragesteller

10.07.2018, 15:38

@RainDrop123123

Ne hatte nen anderen hintergrund. Media Queries benutze ich zusätzlich, war aber in diesem Fall nicht möglich und musste den Style-Tag variabel hinzufügen und ggf. wieder entfernen (je nach Scrollhöhe)

Win7User

11.07.2018, 10:57

Wie du schon richtig erkannt hast, kannst du mit pageYOffset die Position herausfinden, an die gescrollt wurde.

Du hast aber nichts konkretes genannt, wie du die Größe änderst. Aus diesem Grund kann dir hier leider niemand wirklich weiterhelfen.

Hier aber allgemeines Beispiel wie es funktioniert (JavaScript)

function adjustSize(y){
    // Skript um die größe anzupassen
}

document.addEventListener('load', function(ev){
    adjustSize(pageYOffset);
}

Und noch eine kleine Sache:

wenn du eine Frage stellst, solltest du immer Codeschnnipsel oder verlinkungen auf jsbin.com o.Ä. Seiten machen, dass man deinen Code nachvollziehen kann.

Liebe Grüße

Win7User

Dennisthek1nq

10.07.2018, 09:15

Ich nehme an, dass ich das abändern muss, aber wie?

$(window).on('scroll', changeHeaderHeight);

changeHeaderHeight ist natürlich meine Funktion

elmex7

11.07.2018, 06:53

schreib einfach noch sowas dazu:

if ( document.body.scrollTop > 0 ) changeHeaderHeight();

GamerInRed

10.07.2018, 18:47

In so einem Fall lohnt es sich mehr nur Javascript zu benutzen.

Woher ich das weiß:Berufserfahrung

Ähnliche Fragen

Php function von HTML aufrufen?

Ich will mit js in einer js function eine php function aus einer php file ausführen die mit Parameter aus der html Daten an meine Datenbank verschickt

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

HTML: Scroll-to-top-Button geht nicht?

Ich habe gerade einen Scroll-to-top-Button in meine HTML-Webseite eingefügt. Von der Grafik her funktioniert alles, aber die Funktionalität ist nicht so der Hammer. Also er scrollt nicht hoch, wenn man ihn drückt.

In dem Tutorial (siehe unten) wird das Ganze mit JS gemacht. Also das hier ist der Teil aus JS, der dafür sorgt, dass die Seite nach oben scrollt, wenn man ihn drückt:

<script>
  const btnScrollToTop = document.querySelector("#btnScrollToTop")
  btnScrollToTop.addEventListener("click", function() {
    windows.scrollTo(0, 0);
  });
</script>

Muss man JS im head mit einem <link> einbinden, sowie man das mit .css macht?

P.S.: Das ist das erste Mal, dass ich JS benutze.

https://www.youtube.com/watch?v=FK5DEa1Hvco

...zur Frage

Js observer Fehler?

Hallo liebe Community,

ich habe die programmierter Seite eines YouTubes (https://github.com/kevin-powell/navbar-change-on-scroll/tree/master/nav-change-finished)

eingesetzt und ausprobiert. Ziel war es dass sich die navigationsbar oben farblich ändert beim scrollen. Ich bekomme aber immer bei der letzen Zeile im JS Code einen Fehler. Bekommt ihr den auch und wie kann ich diesen beheben?

...zur Frage

html auslagern?

Ich bin dabei eine Internetseite zu prgrammieren.
Mein Problem ist, dass ich nicht auf jeder Seite den selben Header und so einfügen will und falls ich was ändern möchte, es nur einmal machen muss.

Ich hab schon auf mehreren seiten etwas mit PHP gefunden allerdings benutze ich html,css und js. Kann mir jemand helfen?

danke im Vorraus.

...zur Frage

Div soll beim scrollen am Bildschirmrand fixiert werden?

Hallo,

Ich habe ein Div, welches unter einem anderen Div liegt. Wenn ich nun scrolle, soll das Div, sobald es am oberen Browserrand ist, dort fixiert sein. Ich habe folgenden Code ausprobiert, aber leider funktioniert dieser nicht:

.fixed {position: fixed; top:0; }

Kann mir jemand helfen, was an dem Code falsch ist? Kenne mich leider nicht so sehr mit Javascript aus.

Vielen Dank im Voraus

...zur Frage

PHP MySQL Datensätze in einer Liste anzeigen, bei scrollen weitere laden

Hi, ich habe eine Liste, in der ich mit PHP die Daten aus einer MySQL-Datenbank abrufe und anzeigen lasse. Die Liste ist in einem DIV mit overflow: auto (also mit scrollen).

Jetzt zu meiner Frage: Wie mache ich das, wenn nicht alle Datensätze auf einmal angezeigt werden sollen, sondern nur z.B. die ersten 20 und wenn ich dann weiter runter scrolle, sollen die nächsten geladen werden? Sonst lädt die Seite irgendwann zu lange.

Ich nehme mal an, dass geht nur mit JavaScript?

Vielen Dank im Voraus.

...zur Frage

Scroll Schnelligkeit einzelner Elemente verändern (Website)?

Ich habe ein ELement (zB ein Div) und möchte dass dieses div langsamer nach oben scrollt als andere Elemente auf der Seite - Wir nehmen zB an ich habe 4 divs: Jedes Div soll in einer anderen Geschwindigkeit nach oben scrollen.... Wie könnte man das mit JS/CSS umsetzen? Am besten mit Erklärung - im Internet finde ich leider nur fertigen Code den ich nicht einfach so einsetzen will ohne ihn zu verstehen :)

...zur Frage

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zur Frage

PHP Chat reload?

Hallo ihr alle,

ich arbeite momentan an einem Chat-System. Man kann Nachrichten schreiben (Form) und empfangen (aus MySQL). Das Problem, das ich habe, ist, dass ich um neue Nachrichten zu erhalten, die Seite reloaden muss. Nutze ich

$page = $_SERVER['PHP_SELF'];

$sec = "10";

header("Refresh: $sec; url=$page");

Also, dass die Seite alle 10 Sekunden reloaded wird, kann man kaum eine Nachricht zuende schreiben. Meine Frage: Wie bekomme ich es hin, dass die Seite regelmäßig reloaded wird, ohne, dass die Form gelöscht wird. Freue mich auf Antworten.

Mats

...zur Frage

[jQuery AJAX] echo mit HTML Content von PHP Datei ausgeben?

Okay, die Frage ist evtl ein bisschen kompliziert. Deshalb beschreibe ich das anhand eines Beispiels. Zuerst meine Dateien:

PHP (submit.php)

<?php
 $mail = $_GET['mail']; if(filter_var($mail, FILTER_VALIDATE_EMAIL)) { echo "<div role=\"alert\">Ungültige E-Mail</div>"; } else { echo "<div role=\"alert\">Gültige E-Mail</div>"; }

?>

HTML (index.html)

<form id="myForm">
  <input type="email" name="mail" id="mail" placeholder="E-Mail Adresse"/>
  <input type="submit" name="check" id="check" value="Senden"/>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"/> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'submit.php', data: $('form').serialize(),   success: function() {    //echo "Gültige E-Mail    } error: function() { //echo "Ungültige E-Mail" } }); }); }); </script>

Beschreibung:

Sobald das Formular abgesendet wurde, wird die E-Mail an die submit.php gesendet. In dieser wird überprüft, ob die E-Mail gültig ist und gibt dann das Ergebnis in Form von HTML-Code zurück.

Die Lösung mit alert will ich nicht. Es soll unterhalb der Form das Ergebnis stehen.

Wenn ich mit PHP

echo "<div role=\"alert\">Gültige E-Mail</div>";

ausgebe, dann steht das auch direkt in HTML dort (also nicht als PlainText).

Wie ist es also möglich, das Ergebnis der submit.php zu bekommen und in der index.html auszugeben?

Vielen Dank im Voraus!

...zur Frage

JavaScript AJAX sicher?

Hey Community, Habe momentan ein User Control Panel gemacht via PHP. Jetzt wollte ich mich ein bisschen weiterbilden und kam auf die Idee eine Single Page zu machen. Die Frage ist ob AJAX genauso (un)sicher ist wie PHP. Soweit ich das verstanden habe, via AJAX, gibt der User beim Formular ja loginname und pw an, dann übergebe ich die Daten an das JavaScript und er gibt dann via POST die Daten weiter an meine PHP Datei und via Echo kann ich auf das js antworten und dann entscheiden was damit gemacht wird.

Meine Frage: Wie sicher ist das? & kann der Nutzer das JavaScript einsehen, sowie den Quellcode?

...zur Frage

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zur Frage

PHPSESSID Cookie nach reload löschen?

Hallo, ich habe ein Problem mit meinem php code. Immer wenn ich meine Login Seite öffne, mich anmelde, aber dann wieder zurück auf die login seite gehe kommt nur das:

funktioniert dann erst wieder wenn man manuell die cookies löscht. Wie kann ich es hinbekommen, dass die cookies automatisch bei einem reload der Seite wieder gelöscht werden? Danke schonmal

Ach ja hier ist noch der php code:

<?php
      if(isset($_POST['submit'])){
        $username = $_POST['username']; $password = $_POST['password'];
        if($username === 'admin' && $password === 'password'){
          $_SESSION['login'] = true; header('LOCATION:https://example.de'); die();
        } {
          echo "<div class='alert alert-danger'>Username and Password do not match.</div>";
        }
      }
?>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen