• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

.scroll() / .scrollTop() nicht mit absoluten Angaben?

Timer

Mitglied
Hey,
ich habe ein flexiblen Container (mit keinen festen height angaben (nur padding-top in Prozent)) über meinem Header. Nun will ich, dass, wenn man scrollt und der Header ganz oben ist, ein script über jQuery ausgrführt wird. Das würde ich normalerweise machen, indem ich .scrollTop() benutze, jedoch muss ich dort ja die Angaben in Pixel treffen (die Pixel wären dann die Höhe des Container über dem Header). Leider sind die je nach Bildschirmgröße unterschiedlich. Hat jemand ne Idee, wie ich das trotzdem lösen kann?
Ich hoffe, es ist verständlich. Wenn nicht, kann ich gerne Bilder machen, um es besser zu veranschaulichen.
 
Werbung:
Also ich verstehe das so.
So das das Script erst anfängt wenn der Header zu sehen ist .Deshalb muss die höhe des Headers ausgelesen werden damit das Script erst dann anfängt wenn es zu sehen ist .Der Header kann bei anderen Einstellungen ja unterschiedlich hoch sein ,deswegen will er den Container auslesen.
So habe ich es verstanden
 
Zuletzt bearbeitet:
Werbung:
Zur Klärung:
Ich habe auf meiner Webseite einen Container über meinem unterem Header. Der Container ist jedoch unterschiedlich hoch (kommt auf die Bildschirmgröße an). Nun will ich, dass, wenn der untere Header oben am Bildschirm angekommen ist, dieser oben fixiert wird.
spielberger-dev.bplaced.net
Es geht jedoch nun
@themrdomi
Ich glaube, ich habe es nun so gelöst, wie du gesagt hast. Darum Danke

@basti1012
Bei dir weiß ich leider nicht, wie du es gemacht hättest, da bei mir jsfiddle nicht erreichbar ist. Trotzdem danke
 
Ich könnte noch https://basti1012.bplaced.net/index.php?ordner=html&id=250 anbieten

oder so
Code:
<style>
header{
  height:20vh;
  width:100%;
  background:#123456;
  color:white;
  text-align:center;
  font-size:30px;
}
body{
  height:1200px;
}

#fix{
  position:fixed;
  left:5px;
  bottom:5px;
  height:25px;
  width:200px;
  border:1px solid black;
  font-size:25px;
}
</style>
<header>Header</header>
<div id="fix">
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
var header_hohe=$('header').outerHeight();
$(window).scroll(function () {
            if ($(this).scrollTop() < header_hohe) {
      var hoch='Header ist da'
            } else {
var hoch = $(window).scrollTop()-header_hohe;
            }
      $('#fix').html(hoch);
        });
</script>


Aber wie ich jetzt lese ist es nicht ganz was du dir vorgestellt hattest
 
Zuletzt bearbeitet:
Wäre nur fast, was ich wollte. Da könnte ich den Header erst fixieren, wenn er nicht mehr sichtbar ist. Trotzdem danke

EDIT:
Habe gerade erst gelesen, dass du das schon geschrieben hast
 
Werbung:
Ja jetzt wo ich es bei dir auf der Seite sehe versehe ich ich auch wie du es gemeint hast.Aber läuft ja jetzt ,istja bestens. Aber willst du das so lassen? Ich meine wenn man deine Seite betritt ,ist die Navigation ja zimlich weit unten.Habe das schon öfters gesehen mit den fixed header ,aber noch nie das die navigation so weit unten anfäng.Meistens hatten die nur einen geringen Abstand von oben ,bevor sie gefixt wurden
 
Zurück
Oben