So fügen Sie einem gleitenden Div eine "Griffleiste" hinzu

Question

Ich habe eine kleine Splash-Seite und ein browserweites div, das als Wrapper fungiert und ein div innerhalb von #wrapper hat, das an ein $.click();-Ereignis angehängt ist, um das zu verschieben Wrapper div out, um das browsergroße Hintergrundfoto zu betrachten. Ich möchte eine kleine Schaltfläche/Link implementieren, die in der unteren rechten Ecke nach dem Wrapper div eingefügt wird versteckt werden.

Ich weiß, es ist wahrscheinlich hauptsächlich CSS, aber brauche Hilfe.

Vielen Dank im Voraus für Ihre Hilfe!

PS: Verwenden von jQuery als mein Framework.

Answer 1

Der Schlüssel ist im Rückruf der Animation des #wrapper. Ich nahm an, dass:

1. der gesamte Inhalt der Seite innerhalb des #wrapper ist, und verwendet es die Höhe des Inhalts zu berechnen.
2. ist es möglich, dass der Inhalt höher ist als das Browserfenster.
3. werden Sie IE6 nicht unterstützen und können daher position: fixed; verwenden.

CSS:

#toggler { 
    position: fixed; 
    width: 20px; 
    height: 20px; 
    left: 0; 
    display: none; 
    } 

JS:

jQuery(document).ready(function() { 
    var windowHeight = jQuery(window).height(), 
     togglerHeight = jQuery('#toggler').height(), 
     togglerTopPosition = windowHeight - togglerHeight; 

    jQuery(#toggler).css('top', togglerTopPosition + 'px'); 

    jQuery('#wrapper').click(function() { 
     // take care of hiding the #wrapper 
     jQuery('#wrapper').animate({ 
      yourSettings, 
      yourDuration, 
      function() { jQuery(#toggler).show(); } // callback 
     }); 
    }); 

    jQuery('#toggler').click(function() { 
     jQuery(this).hide(); 
     jQuery('#wrapper').animate({...}); 
    }); 
}); 

Wie Sie sich vorstellen können, #toggler ist die kleine Taste/link. Stil wie Sie wollen, und ändern Sie die Breite und Höhe nach Bedarf.