Плавающее меню jQuery - показывать после того, как полоса прокрутки достигает 1280 пикселей - PullRequest
0 голосов
/ 08 марта 2011

Я хочу использовать это плавающее меню , но хочу, чтобы меню появлялось только после того, как полоса прокрутки пользователя имеет 1280 пикселей.Динамический привод имеет хороший пример .Любая помощь будет оценена.

Вот вызов js:

//config
$float_speed=1500; //milliseconds
$float_easing="easeOutQuint";
$menu_fade_speed=500; //milliseconds
$closed_menu_opacity=0.75;

//cache vars
$fl_menu=$("#fl_menu");
$fl_menu_menu=$("#fl_menu .menu");
$fl_menu_label=$("#fl_menu .label");

$(window).load(function() {
    menuPosition=$('#fl_menu').position().top;
    FloatMenu();
    $fl_menu.hover(
        function(){ //mouse over
            $fl_menu_label.fadeTo($menu_fade_speed, 1);
            $fl_menu_menu.fadeIn($menu_fade_speed);
        },
        function(){ //mouse out
            $fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
            $fl_menu_menu.fadeOut($menu_fade_speed);
        }
    );
});

$(window).scroll(function () { 
    FloatMenu();
});

function FloatMenu(){
    var scrollAmount=$(document).scrollTop();
    var newPosition=menuPosition+scrollAmount;
    if($(window).height()<$fl_menu.height()+$fl_menu_menu.height()){
        $fl_menu.css("top",menuPosition);
    } else {
        $fl_menu.stop().animate({top: newPosition}, $float_speed, $float_easing);
    }
}

Ответы [ 3 ]

4 голосов
/ 08 марта 2011

Я думаю, что это хороший вариант использования jQuery Waypoints Plugin , который обладает удивительной функциональностью, которая выполняет не только то, что вы пытаетесь сделать, но и многое другое, включая пользовательскую аналитику и «липкие» заголовкиколонтитулы

0 голосов
/ 08 марта 2011

Этот плагин для jQuery делает нечто похожее, он позволяет вам инициировать событие, когда браузер прокручивает до определенного элемента. Не совсем то, что вы просили, но очень связанное и полезное:

http://imakewebthings.github.com/jquery-waypoints/

0 голосов
/ 08 марта 2011

Если я правильно понимаю ваш вопрос, просто добавьте эту строку в функцию FloatMenu():

$fl_menu.css('display', scrollAmount<1280? 'none' : 'block');

Очевидно, это должно пройти после , когда вы определяете scrollAmount.

...