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

DIV Footer "fixed" am Scrollende mit hoch ziehen "relative" ?

T

TELLO

Neues Mitglied
Hi NG,
ich bekomme das einfach nicht hin.Ich habe eine seite, bei der ich unten ein DIV in höherer z ebene als navi nutze.
das ist fixed und es wird nur 75 px angezeigt. der rest ist unterhalb vom bildschirm versteckt.
nun möchte ich aber, dass wenn die seite bis nach unten gescrollt wurde, sich dieser footer DIV mit nach oben "aufscrollt". quasi sich wie relative verhält.

ich habe dies hier gefunden:

http://www.html.de/javascript-ajax-...-sichtbaren-bereich-ermitteln.html#post318422

wenn ich aber nach einem bestimmten scrollwert position: relative oder static statt fixed zuweise, funktioniert das zwar in etwa, allerdings ist der div immer an einer anderen stelle als die wo er fixed war. selbst wenn ich versuche dies mit werten zu justieren ist es immer eine unsaubere sache.

sicher muss das anders gemacht werden, hat jemand hilfe dazu?


Danke
 
Hallo,

wenn jemand versteht was hast und was möchtest, hilft bestimmt jemand.

Zeige ein Link das wir sehen was hast und vielleicht auch was möchtest.

Man kann nicht nur die classe ändern mit jquery sonder den padding wert dynamisch ändern beim scrollen. kommt halt immer drauf an was hast.

Cheffchen
 
Hier der Code eines Beispiels.
Ich möchte das DIV sidebar erst unten fixed ist. Wenn ein bestimmter Wert gescrollt ist (hier 2995) soll das DIV sidebar dann static oder relative reagieren. Es soll sich einfach mit bewegen/hochscrollen als ob es zum Inhalt der Seite gehört (static). Sinn ist es eine kleine Navi zu sehen, wenn die Seite komplett nach unten gescrollt ist, soll sich die kleine Navi aufziehen und es soll dann die gesamte Navi der DIV sichtbar werden.

Mache das momentan mit einem Wert, evtl. kann man das auch direkt angeben, dass es am Scrollende der Seite passieren muss.
Leider sehe ich den roten NaviDIV nach den 2995 nicht mehr. Es klappt nicht.


DANKE für HILFE!
TELLO


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Unbenanntes Dokument</title><style type="text/css">
#sidebar {	    z-index: 2;        position: fixed;        top: 100%;        right: 0px;		width:100%;		height:300px;		margin-top: -75px;		background-color:#F00;        }
    #sidebar.static {        position: static;        }        </style><script src="js/modernizr.custom.37797.js"></script> <!-- Grab Google CDN's jQuery. fall back to local if necessary --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script><script>	$(document).ready(function () {        var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));        $(window).scroll(function (event) {            var t = $(this).scrollTop();		    if (t >= 2995) {                $('#sidebar').addClass('static');            } else {                $('#sidebar').removeClass('static');            }        });    });  </script>
</head><body><div id="sidebar">  <p>Ich bin eine Navigation - dass soll man immer sehen (margin -75px;)</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>&nbsp;</p>  <p>das soll man erst sehen wenn die Seite runter gescrollt wurde! </p></div><p>hallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallohallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallohallo</p><p>&nbsp;</p><p>hallo</p><p>&nbsp;</p></body></html>
 
Hat jemand eine Idee wie ich das lösen kann?
z.B. den marin-top Wert für den DIV #sidebar ab einer bestimmten Scrolllänge von -75px auf -300px - allerdings gleich zum scrollvorgang - zuweisen. Damit würde das ja aussehen wie wenn der DIV #sidebar mit hochscrollt.

TELLO
 
Hallo,

schuldige, entweder bin ich zu blöd und nur ich versteh einfach nicht was du nun genau möchtest oder deine beschreibung ist nicht so doll :O).

Wie so fügst 2mal das gleich jquery ein?
das zweite kann raus.
Code: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>

da ich nicht versteh was möchtest und dein code mir noch fragfürdiger ist, wieso verschwindet die sidebar ganz unten, hier noch ein anderer code wo das margin-Top dynamisch anpassen kannst je nach scroll.

Code: 
  <script type="text/javascript" src="[URL="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js%22%3e%3c/script"]http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script[/URL]>
<script type="text/javascript">
        $(function() {
            var offset = $("#img_left_index").offset();
            var topPadding = 15;
            $(window).scroll(function() {
                if ($(window).scrollTop() > offset.top) {
                    $("#img_left_index").stop().animate({
                        marginTop: $(window).scrollTop() - offset.top + topPadding
                    });
                } else {
                    $("#img_left_index").stop().animate({
                        marginTop: 0
                    });
                };
            });
        });
    </script>
und der html teil zb:
Code: 
<div class="two">
 <img id="img_left_index" alt="image" src="BILD.png" style="margin-top: 135px;">
    </div>

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben