Question

我想在左侧有一个导航栏，在滚动时会固定，但是屏幕尺寸很灵活。我使用了以下

    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation" data-spy="affix" style="width: 180px;">
            <ul class="nav nav-sidebar">

with data-spy =＆＃34; affix＆＃34;我确保导航栏是固定的。但是，由于我加载了词缀，因此在加载网站时会产生恼人的效果。首先，网站上的文字看起来很低（比它应该的地方低约300px）......而不是它到达我想要它的地方。我认为原因是加载affix.js文件需要时间，并且只有在加载后它才会将文本放在正确的位置。因此，我的问题是如何避免这种情况？

也许词缀太多了，因为它实际上用于拥有一个动态的导航栏。我真的不想要那个。我想我可以尝试在没有javascript的情况下获取导航栏，但这看起来有点棘手。我的导航栏具有灵活的屏幕尺寸，我无法弄清楚如何使其固定而不是滚动。

嗨再次：我花了一段时间才弄清楚jsfiddle是如何工作的，但这里是链接

cumcount

它显示左侧的导航栏和顶部的导航栏。所以基本上一切都正常。问题是，如果内容很大，网站就会出现上述问题

https://jsfiddle.net/carl101/rb8x80yb/2/embedded/result/

Answer 1

我不清楚你说的是什么。据我所知，你需要一个固定的侧边栏，它也不会用标题滚动。对？这个解决方案适合您吗？

＆＃13;

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* End Praveen's Reset for Fiddle ;) */
a {text-decoration: none;}

html, body {height: 100%;}
body {padding-top: 50px; padding-left: 75px;}
p {margin: 0 0 10px;}

header {background-color: #000; position: fixed; top: 0; width: 100%; z-index: 2; left: 0;}
header h1 {line-height: 1; text-align: center; padding: 5px 0; font-weight: 1.5em;}
header h1 a {font-weight: normal; color: #fff;}

aside {position: fixed; left: 0; height: 100%; top: 30px; background-color: #99f; padding-top: 25px; z-index: 1; width: 70px;}

＆＃13;

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<header>
  <h1><a href="">Heading</a></h1>
</header>
<aside>
  <nav>
    <ul>
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a></li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li><a href="">Item 5</a></li>
    </ul>
  </nav>
</aside>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>
<p>Jason John Gesser (born May 31, 1979) is an American college football coach and former player, currently the quarterbacks coach for the Wyoming Cowboys of the Mountain West Conference.</p>
<p>He was previously the interim head coach, offensive coordinator, quarterbacks coach, and recruiting coordinator for the Idaho Vandals of the WAC. He played quarterback for Washington State Cougars of the Pac-10 under head coach Mike Price, and played in the 2003 Rose Bowl. As a professional, Gesser played for the Utah Blaze of the Arena Football League, the Calgary Stampeders of the Canadian Football League, and the Tennessee Titans of the National Football League. He was originally hired at Idaho as running backs coach in June 2011. Gesser is the grandson of Green Bay Packers Hall of Fame member Joseph "Red" Dunn.</p>

＆＃13;

Answer 2

我想通了...... {position：fixed}无需使用affix.js就能胜任...感谢您对我的耐心最好卡尔

带有affix.js的左侧导航栏，屏幕尺寸灵活

2 个答案: