Scrollen bis zu einem bestimmten Punkt

[FebsDeluxe]

Hey Leute,
ich möchte, dass auf www.schoolquotes.de/schoolquotes das rechte element und das element "werbung" beim scrollen mit einem abstand von 70px zum oberen bildschirmrand stehen bleiben, und beim zurürckscrollen wieder mit nach unten gehen ....

  <script type="text/javascript">
    var menuelement=document.getElementById('rechts');   
    function update_style(){
      if(document.documentElement.scrollTop>70) {
        menuelement.style.position='fixed';
        menuelement.style.top='70';
      }
    }
    window.addEventListener('scroll', update_style);
  </script>


  <script type="text/javascript">
    var menuelement=document.getElementById('banner');   
    function update_style(){
      if(document.documentElement.scrollTop>70) {
        menuelement.style.position='fixed';
        menuelement.style.top='70';
      }
    }
    window.addEventListener('scroll', update_style);
  </script>

bei diesem code bleiben sie dauerhaft stehen -.-'

 

[FebsDeluxe]

Kann mir niemand hierbei helfen?

 

[Sempervivum]

So ganz verstehe ich nicht, was Du da vorhast. Aber Du hast deine Funktion update_style() zweimal definiert. Die zweite Definition überschreibt dabei die erste. Du muss beide zusammenfassen:

<script type="text/javascript">
    var menuelement=document.getElementById('rechts');
    function update_style(){
      menuelement.style.top='10';
      if(document.documentElement.scrollTop>60) {
        menuelement.style.position='fixed';
      } else {
        menuelement.style.position='absolute';
      }
    }
    window.addEventListener('scroll', update_style);
  </script>

 

[FebsDeluxe]

Ich habe es jetzt so:

<script type="text/javascript">
    var menuelement=document.getElementById('rechts');
    function update_style(){
      if(document.documentElement.scrollTop>60) {
        menuelement.style.marginTop='10px';
        menuelement.style.position='fixed';
      } else {
        menuelement.style.marginTop='0px';
        menuelement.style.position='absolute';
      }
    }
    window.addEventListener('scroll', update_style);
  </script>

(nur auf das rechte bezogen)
aber es springt immernoch beim scrollen auf die ursprüngliche position zurück -.-'

 

[Sempervivum]

Ich würde dir ja gern weiterhelfen, abe ich habe Probleme zu verstehen, was Du genau vorhast. Kannst Du das etwas genauer erklären? Warum kannst Du nicht einfach statisch position:fixed verwenden?

 

[FebsDeluxe]

Auf der Seite gibt es eine Kopfzeile, welche fixed am oberen bildschirmrand ist

Darunter ist eine Menüleiste, welche mitscrollt (das ist so gewollt)

rechts unter der Menüleiste ist das rechte div, welches mitscrollen soll (position: absolute), bis es an der Kopfzeile "andockt" und dort stehen bleibt (fixed), solange, bis man wieder hoch scrollt und die Menüzeile zu sehen ist (dann soll er wieder mit in die ursprungsposition scrollen (position: absolute) ...

hier sind die elemente zu sehen: http://www.schoolquotes.de/schoolquotes

 

[Sempervivum]

Wie ich sehe, hast Du es schon hinbekommen. Glückwunsch!

 

[FebsDeluxe]

Ja ...
hier das Script (für alle, die noch auf der Suche sind)

<script type='text/javascript'>
  document.onscroll = function () {
    var pos = window.pageYOffset;
      if (pos > 65)
        document.getElementById('die_id_deines_elements').style.top = pos + 'px';
      else
        document.getElementById('die_id_deines_elements').style.top = '65px';
  }
</script>