Question

在《经济学家》网站上,只有一页的滚动之后,才出现横向头盔。见下文:

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

我想的是,这一垂直版本将来自该页左边或右边,并扩大到已经存在的网页内容。

Anyone know of an existing plugin or how I could build something like that in jQuery?

Answer 1

这里有一个简单 j子,为你们工作:

(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);

<Usage:$(window).scroll Toast ({toast: “#toast”, ×: 50};,其中#toast是显示幻灯片内容的甄选器,offset是你希望用户在显示线之前进行滚动的时间。

<>说明>:

Uses CSS position:fixed and an elevated z-index to make the toast element appear on top of other content.
When the target element is scrolled to a value equal to or beyond offset, the toast element is slid out (it is initially hidden).
When the target element is scrolled to a value less than offset the toast element is slid back in.
Could easily be extended to show the toast on the other edge of the screen or the top or bottom.
Will probably work on any scrollable element, but I ve used $(window) because it seems to fit the use case you described.

See a working example here: http://jsfiddle.net/andrewwhitaker/56dTA/。

Answer 2

是的,非常容易建造:

您:

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

这四点应当是绝对立场,并显示:

With the jQuery, on scroll-down you use $( #hiddenmenu ).show(); That s pretty much it, if you need the full code, just ask and I ll post it.

友情链接