内容隐藏在固定显示/隐藏 div 上方的 navbar-fixed-top 垂直滚动答案

【问题标题】：Content hidden behind fixed show/hide div above navbar-fixed-top on vertical scroll内容隐藏在固定显示/隐藏 div 上方的 navbar-fixed-top 垂直滚动
【发布时间】：2016-12-21 06:52:23
【问题描述】：

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

<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

【问题讨论】：

不太清楚你到底想要什么。对我来说，它似乎工作正常。
向下滚动后返回顶部时，顶部以<h2>Betrayed cheerful declared end...</h2><p>Prepared is me marianne pleasure ...</p> 开头的页面内容被导航栏和横幅覆盖。我不希望这种情况发生。当您滚动回顶部时，我不希望内容的任何部分被覆盖。
问题出在脚本上，当滚动时它会添加类但当我们移到顶部时不会删除类。您需要在 if 条件下添加 position.top + 50 。当我们向下移动时，顶部位置将为 0。所以当我们向后移动时，它不能删除类。
这意味着您必须跟踪滚动事件并向上滚动标题内容div。

标签： jquery css twitter-bootstrap css-position

【解决方案1】：

问题在于，当您再次向上滚动时，固定的类不会从页面中删除，这是因为您在 JQuery 代码中使用了if (winPosition >= position.top)，而您应该使用if (winPosition > position.top)。

See jsfiddle

【讨论】：