隐藏在固定显示/隐藏div后面的内容在垂直滚动上的navbar-fixed-top之上

时间:2016-12-21 06:52:24

标签: jquery css twitter-bootstrap css-position

点击链接/按钮时,我会在导航栏固定顶部导航栏上方显示横幅,并且两者都会向下推送页面内容并在垂直滚动上保持固定。我遇到的问题是,一旦页面向下滚动并再次返回顶部,页面内容的一部分将隐藏在导航栏和可见横幅后面。我不希望这种情况发生,但我尝试过的任何工作都没有。我很感激帮助!

<div class="page">    
      <div class="container-fluid banner">
      <h1>Random gibberish</h1>
      <h3>plenty uneasy do.</h3>
      <p>Friendship so considered . </p>
      <p>Moment led family ...</p>
    </div>

    <nav class="navbar navbar-inverse w100">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Global Topnav</a></li>
      </ul>
    </nav>
    </div>

    <div class="container content">
      <h2>Betrayed cheerful declared end...</h2>        
      <p>Prepared is me marianne pleasure ...</p>        
      <p>Lose john poor ...</p>
      <div class="btn btn-warning btn-lg show-banner">
         Show banner
      </div>
    </div>

This FIDDLE will show it better

1 个答案:

答案 0 :(得分:2)

问题是,当您再次向上滚动时,修复的类不会从页面中移除,因为您在JQuery代码中使用if (winPosition >= position.top)时应使用if (winPosition > position.top)代替。

See jsfiddle