Как бы я реализовал вертикальную версию этого горизонтального динамического заголовка?

Question

На сайте Economist есть горизонтальный заголовок, который появляется только после того, как вы прокрутите страницу вниз один раз. Смотрите здесь:

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 - это сколько времени вы хотите, чтобы пользователь прокручивал страницу до появления тоста.

Примечания :

• Использование CSS position:fixed и повышение z-index чтобы элемент toast отображался поверх другого содержимого.
• Когда целевой элемент прокручивается до значения, равного или превышающего offset, элемент toast выдвигается (он изначально скрыт).
• Когда целевой элемент прокручивается до значения, меньшего offset, элемент тоста вставляется обратно.
• Может быть легко расширен, чтобы показать тост на другом краю экрана илиtop или bottom.
• Возможно, будет работать с любым прокручиваемым элементом, но я использовал $(window), потому что он, кажется, соответствует описанному вами сценарию использования.

См. рабочий примерздесь: http://jsfiddle.net/andrewwhitaker/56dTA/

Answer 2

Да, это довольно легко построить:

Вы создаете:

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

Этот div должен иметь абсолютное положение и отображать: нет;

С помощью jQuery при прокрутке вниз вы используете $('#hiddenmenu').show(); Вот и все, если вам нужен полный код, просто спросите, и я опубликую его.