javascript - 我如何实现这个水平动态标题的垂直版本？

Question

在《经济学人》网站上，有一个水平标题，仅在您向下滚动页面一次后才会出现。请参阅此处:

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

我想要的是一个垂直版本，它会从页面的左侧或右侧出现，并扩展到已经存在的页面内容。

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

Answer 1

这是一个应该适合您的简单 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 是您希望用户在 toast 出现之前滚动的时间。

注释:

• 使用 CSS position:fixed 和提升的 z-index 使 toast 元素显示在其他内容之上。
• 当目标元素滚动到等于或超过 offset 的值时，toast 元素会滑出(最初是隐藏的)。
• 当目标元素滚动到小于 offset 的值时，toast 元素会滑回。
• 可以轻松扩展以在屏幕的另一边缘、顶部或底部显示 Toast。
• 可能适用于任何可滚动元素，但我使用了 $(window) 因为它似乎适合您描述的用例。

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