Question

我正在使用bootstrap3，我正在尝试为移动设备创建固定菜单。此菜单可以包含子菜单，子菜单中可以包含大量内容。因此，当您在手机上观看该网站（例如320x480）且菜单很长时，您无法在内部/子菜单中滚动。换句话说，如果屏幕高度太短，则无法看到所有菜单项，因为菜单栏粘在屏幕顶部。

我已经从github和这里+ Bootstrap的页面阅读了很多帖子，但似乎无法让它工作。我认为固定的位置是问题？！

我将尝试用fiddle进行解释，如下所示编辑：你可以在这里查看一个例子 - ＆gt; example（调整浏览器大小并尝试打出品牌）

HTML

<div id="main-nav-container">
 <div class="container">
   <div class="row">
    <div class="col-md-12 clearfix">
      <nav id="main-nav">
        <div id="responsive-nav">
          <div id="responsive-nav-button">
            Menu <span id="responsive-nav-button-icon"></span>
          </div><!-- responsive-nav-button -->

        <ul class="clearfix responsive-nav">
          <li><a href="http://webdinge.webshopapp.com/nl/" class="active"><i class="fa fa-home"></i></a></li>
          <li><span class="menu-button"></span><a title="Camera" href="http://www.webshop.com/nl/camera/">Camera</a>
              <ul>
                <li><a title="Canon" href="http://www.webshop.com/nl/camera/canon/">Canon</a></li>
                <li> like 40 li items more for example </li>
              </ul>
          </li>
etc...

JQUERY

 $(function() {
  var sticky_navigation_offset_top = $('#main-nav-container').offset().top;

  // our function that decides weather the navigation bar should have "fixed" css position or not.
  var sticky_navigation = function(){
    var scroll_top = $(window).scrollTop(); // our current vertical position from the top

    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
    if (scroll_top > sticky_navigation_offset_top) {
      $('#main-nav-container').css({ 'position': 'fixed', 'top':0, 'left':0 });
    } else {
      $('#main-nav-container').css({ 'position': 'relative' });
    }   
  };

  sticky_navigation();

  // and run it again every time you scroll
  $(window).scroll(function() {
     sticky_navigation();
  });
});

那么如何制作菜单以便li项目可滚动，以便在较小的屏幕上可以查看整个子菜单？

在移动设备中打开子菜单时，固定菜单不会滚动

0 个答案: