Question

我正在寻找以下方案的解决方案。我正在使用Bootstrap NavBar。此外，我设法在NavBar顶部显示全宽图像，请参见下面的屏幕截图。

在左侧通常有另一个人物。对于HTML和CSS代码See this JsFiddle，以下列表提供了相关代码的摘录。

    $(document).ready(function () {
                $("#widget").load(function () {
                    var ifr = document.getElementById("widget")
                    var anchors = ifr.contentDocument.getElementsByTagName("a");
                    for (var i in anchors) {
                        anchors[i].setAttribute("onClick", "testUrl()");
                    }
                });
            });  
function testUrl() {   
    //your code goes here for validating the URLs... 
}

我想要以下行为：当内容足够长时，向下滚动应该向上移动NavBar和标题，这样最终会隐藏标题。然而，NavBar应保持在页面顶部，即使页面内容更长。这可能吗？

Answer 1

您可以使用Bootstraps Affix.js。您不需要为此修复导航栏，因此它已被删除以及标题本身的位置。

只需将数据属性添加到CSS中的navbar和词缀类中，以满足您的身高要求。

请参阅工作示例摘录。

＆＃13;

#header {
  background-image: url(http://placehold.it/185x185/f00/fff);
  background-repeat: repeat-x;
  height: 185px;
}
.navbar.affix {
  width: 100%;
  margin-top: -185px;
}
/* Breadcrumps */

.kras-breadcrumb {
  list-style: outside none none;
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 0;
}
.kras-breadcrumb > li {
  display: inline;
  vertical-align: middle;
  line-height: 50px;
}
.kras-breadcrumb > li + li::before {
  color: #ff0000;
  content: "\2022 ";
  padding: 0 6px;
}
.kras-breadcrumb > .active {
  color: #FFFFFF;
}
.kras-breadcrumb li a {
  color: #FFFFFF;
}
/* Login form in NavBar */

.navbar input {
  height: 20px;
  padding: 0;
}
.form-inline .form-control {
  width: 110px;
}
.navbar-kras-login {
  margin-top: 11px;
  margin-bottom: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="header"></div>
<nav id="w1" class="navbar-inverse navbar-static-top navbar" role="navigation" data-spy="affix" data-offset-top="185">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w1-collapse"><span class="sr-only">Toggle navigation</span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

      <span class="icon-bar"></span>

    </button>
  </div>
  <div id="w1-collapse" class="collapse navbar-collapse">
    <ul class="kras-breadcrumb navbar-left">
      <li><a href="#">MySite</a>

      </li>
      <li class="active">Welcome Page</li>
    </ul>
    <ul id="w2" class="navbar-nav navbar-right nav">
      <li>
        <div class="navbar-text pull-right navbar-kras-login">
          <form id="w0" class="form-inline" action="/" method="post" role="form">
            <input type="hidden" name="_csrf" value="UGdBNWh2SFcyL3hmGxkHNhI/CUACGB01PDITdzckJWclP3h5LhohYw==">
            <div class="form-group field-loginform-username required">
              <label class="sr-only" for="loginform-username">Username</label>
              <input type="text" id="loginform-username" class="form-control" name="LoginForm[username]" placeholder="Username">
            </div>
            <div class="form-group field-loginform-password required">
              <label class="sr-only" for="loginform-password">Password</label>
              <input type="password" id="loginform-password" class="form-control" name="LoginForm[password]" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary btn-xs">Login</button>
          </form>
        </div>
      </li>
    </ul>
  </div>
</nav>
<div class="container">
  <div class="site-index">
    <div class="jumbotron">
      <h1>Congratulations!</h1>

      <p class="lead">You have successfully created your Yii-powered application.</p>
      <p><a class="btn btn-lg btn-success" href="http://www.yiiframework.com">Get started with Yii</a>

      </p>
    </div>
    <div class="body-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

＆＃13;

Bootstrap NavBar上的图像，滚动时淡出

1 个答案: