本文介绍了我如何可以有一个滑动菜单div不移动,除非页面向下滚动过某一点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个菜单div,我想向下滑动,所以它总是可见的,但我想它被定位在我的标题div。我不想让它移动,直到菜单的顶部击中屏幕的顶部,然后留在原地。基本上我想要一个滑动菜单,其最大高度可以滑动。
I have a menu div that I want to slide down so it's always visible, but I want it to be positioned under my title div. I don't want it to move until the top of the menu hits the top of the screen and then stay in place. Basically I want a sliding menu with a maximum height it can slide to.
推荐答案
我想我明白你在说什么 - 我们使用类似的技术在与jQuery。方法如下:
I think I understand what you're talking about—we used a similar technique on The King with jQuery. Here's how:
///// CONFIGURATION VARIABLES:
var name = "#rightsidebar";
var menu_top_limit = 241;
var menu_top_margin = 20;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////
$(window).scroll(function()
{
// Calculate the top offset, adding a limit
offset = menuYloc + $(document).scrollTop() + menu_top_margin;
// Limit the offset to 241 pixels...
// This keeps the menu out of our header area:
if(offset < menu_top_limit)
offset = menu_top_limit;
// Give it the PX for pixels:
offset += "px";
// Animate:
$(name).animate({top:offset},{duration:menu_shift_duration,queue:false});
});
(帽子到谁写这段代码。)
(Hat tip to @soyrex who wrote this code.)
这篇关于我如何可以有一个滑动菜单div不移动,除非页面向下滚动过某一点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!