Question

我尝试在菜单和侧边栏上添加词缀以固定其向下滚动的位置。我的菜单有一个子菜单，正常位置与侧边栏重叠。添加词缀后，如果页面向下滚动，侧栏将始终与子菜单重叠。

我认为附加事件会在侧边栏中添加一些css来执行此操作。我现在想要在单个子菜单中添加一些自己的css，它会添加css以使子菜单再次显示在前面。

我怎样才能正确地做到这一点 - 我无法找到正确的解决方案。

HTML code：

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
  <h1>Bootstrap Affix Example</h1>
  <h3>Fixed (sticky) navbar on scroll</h3>
  <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
  <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  <ul id="menu" class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li>
        <a href="#">Page 1</a>
        <ul id="overlapingSubmenu">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
            <li>Test 5</li>
        </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <nav class="col-sm-3">
        <div id="sbb" style="width: 200px; border: 1px solid #000; margin-top: 70px;">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
          </ul>
        </div>
    </nav>
    <div class="col-sm-9">   
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling 777</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
      <h1>Some text to enable scrolling</h1>
    </div>
  </div>
</div>

CSS代码：

.affix {
    top: 20px;
}

.affix {
    top: 0;
    width: 100%;
}

.affix + .container-fluid {
    padding-top: 70px;
}

ul.nav li ul
{
    display: none;
    position: absolute;
}

ul.nav li:hover ul
{
    display: block;
    width: 160px;
    background-color: #777;
    z-index: 99999;
}

ul.nav li:hover ul li
{
    height: 35px;
    width: 160px;
}

.menuToTop 
{
    z-index: 99999 !important;
    position: fixed !important;
    border: 1px solid #ff0000;
    background-color: #aaa !important;
}

JS代码：

$(document).ready(function(){
    $('#sbb').affix({offset: {top: 150} }); 
    $('#sbb').on('affixed.bs.affix', function(){
        console.log('affixed ...');
        $( "#overlapingSubmenu" ).addClass( "menuToTop" );
    });
});

以下是一个示例小提琴：https://jsfiddle.net/6dn9364L/

Bootstrap Affix重叠子菜单

0 个答案: