Question

在经济学人网站上，只有向下滚动一次页面后才会显示水平标题。见这里：

http://www.economist.com/blogs/asiaview/2010/12/china_and_nobel_peace_prize

我想要的是它的垂直版本，它将从页面的左侧或右侧出来，并展开已经存在的页面内容。

任何人都知道现有的插件或者我如何在jQuery中构建类似的东西？

Answer 1

是的，它很容易构建：

您创建了一个：

<div id="hiddenmenu">
This Appears on scrolldown
</div>

这个div应该是绝对的positionend，并且display：none;

使用jQuery，在向下滚动时使用$('#hiddenmenu').show(); 这就是它，如果你需要完整的代码，只需要问我就发布它。

Answer 2

这是一个适合您的简单jQuery插件：

(function($) {
    $.fn.scrollToast = function(options) {
        var settings = options || {};
        var offset = settings.offset;
        var toast = settings.toast;
        var $toast = $(toast);
        var hidden = true;

        // prepare the toast:
        $toast.css({
            display: 'none',
            position: 'fixed',
            top: '0px',
            left: '0px',
            zIindex: '1',
            overflow: 'hidden'
        });


        this.bind("scroll", function($event) {
            var top = $(this).scrollTop();
            if ((top >= offset && hidden) || (top < offset && !hidden)) {
                hidden = !hidden;
                $toast.animate(
                    {width: "toggle"});               
            }
        });
    };
})(jQuery);

用法：$(window).scrollToast({toast: "#toast", offset: 50});，其中#toast是一个选择器，指示要滑出的元素，而offset是您希望用户在之前滚动的时长吐司出现了。

备注：

使用CSS position:fixed和提升z-index来使toast元素显示在其他内容之上。

当目标元素滚动到等于或超过offset的值时，toast元素将滑出（最初隐藏）。

当目标元素滚动到小于offset的值时，toast元素将滑回。

可以轻松扩展以在屏幕的另一边或顶部或底部显示吐司。

可能适用于任何可滚动元素，但我使用$(window)因为它似乎符合您描述的用例。

请参阅此处的工作示例：http://jsfiddle.net/andrewwhitaker/56dTA/

如何实现此水平动态标头的垂直版本？

2 个答案: