【问题标题】:How can I have a sliding menu div that doesn't move unless the page is scrolled down past a certain point除非页面向下滚动超过某个点,否则我怎样才能拥有一个不会移动的滑动菜单 div
【发布时间】:2010-09-18 13:23:27
【问题描述】:

我有一个菜单 div,我想向下滑动以使其始终可见,但我希望它位于我的标题 div 下。我不希望它移动,直到菜单顶部到达屏幕顶部然后保持原位。基本上我想要一个可以滑动到的最大高度的滑动菜单。

【问题讨论】:

  • 不错的概念。用户不必向上滚动即可找到菜单。这个菜单 div 是水平的,还是左侧的垂直?

标签: css html


【解决方案1】:

Slashdot 做到了这一点。例如,查看http://tech.slashdot.org/tech/08/10/22/1246200.shtml

您也许可以从他们的网站上取消该技术。

【讨论】:

    【解决方案2】:

    我想我明白你在说什么——我们在 The King 上使用了类似的技术和 jQuery。方法如下:

    ///// 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});
    });
    

    (向编写此代码的@soyrex 致敬。)

    【讨论】:

    • 是的,这就是我想要的,事实上,我更喜欢这种方式。
    • menuYloc在这段代码中的作用是什么?它似乎没有在任何地方设置......
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-09-15
    • 1970-01-01
    • 2014-01-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多