Question

我想使用此floating menu，但只希望在用户滚动条为1280px后显示菜单。动态驱动器有good example。任何帮助将不胜感激。

这是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);
    }
}

Answer 1

我认为使用jQuery Waypoints Plugin这是一个很好的用例，它具有令人惊叹的功能，不仅包括您尝试做的事情，还包括更多功能，包括自定义分析和“粘性”页眉/页脚

Answer 2

如果我理解你的问题，只需在FloatMenu()函数中添加此行：

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

显然，在定义scrollAmount后，必须先进行。

Answer 3

这个jQuery插件做了类似的事情，它允许你在浏览器滚动到特定元素时触发事件。不完全是你要求的，但非常相关和有用：

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

jQuery浮动菜单 - 滚动条达到1280像素后显示

3 个答案: