jQuery 浮动菜单 - 滚动条达到 1280 px 后显示
我想使用这个 浮动菜单 但只希望菜单出现在用户滚动条位于 1280px。动态驱动器有一个很好的例子。任何帮助将不胜感激。
这是 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);
}
}
I want to use this floating menu but only want the menu to appear after the user scrollbar is at 1280px. Dynamic drive has a good example. Any help would be appreciated.
Here's the js call:
//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);
}
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为这是使用 jQuery Waypoints 插件 的一个很好的用例，它具有惊人的功能，但没有仅您想要做的事情，但更多，包括自定义分析和“粘性”页眉/页脚
I think this is a good use case to employ jQuery Waypoints Plugin which has amazing functionality that does not only what you're trying to do, but more, including custom analytics and "sticky" headers/footers
这个 jQuery 插件做了类似的事情，它允许您在浏览器滚动到特定元素时触发事件。不完全是您所要求的，但非常相关且有帮助：
http://imakewebthings.github.com/jquery -航点/
This plugin for jQuery does something similar, it allows you to trigger an event when the browser scrolls to a particular element. Not exactly what you asked for, but very related and helpful:
http://imakewebthings.github.com/jquery-waypoints/
如果我正确理解您的问题，只需在 FloatMenu() 函数中添加这一行即可：
显然，这必须在您定义scrollAmount 之后进行。
If I understand your question correctly, just add this line in the
FloatMenu()function:Obviously, this has to go after you define scrollAmount.