如何在滑动div中添加“手柄栏”

Question

我有一个小的启动页面，并且有一个浏览器范围的div作为包装器，并且在#wrapper内部有一个div，它附加到$.click();事件以将包装器div滑出查看浏览器大小的背景照片。我想要实现一个小的按钮/链接，在隐藏包装div后，它会在右下角滑入。

我知道它可能主要是CSS，但需要一些帮助。

提前感谢您的帮助！

PS：使用jQuery作为我的框架。

Answer 1

关键在于#wrapper动画的回调。我认为：

1. 页面的整个内容都在#wrapper中，并用它来计算内容的高度。
2. 内容可能高于浏览器窗口。
3. 您不会支持IE6，因此可以使用position: fixed;。

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({...});
    });
});

您可以猜到，#toggler是小按钮/链接。根据需要设置样式，并根据需要更改宽度和高度。