Bootstrap 3和滚动时捕捉或固定的导航栏

时间：2015-12-24 19:53:56

标签： css3 twitter-bootstrap-3

Bootstrap 3在这里，这是我的jsFiddle。我真的很喜欢我的标题导航栏，但是想要调整它以便在用户查看时“快照”或“引脚”到页面顶部，几乎就像它们在{{{ 3}}。唯一不同的是，它们从透明背景过渡到黑色背景，我只想在任何时候都坚持使用纯灰色背景。

看一下这个页面源代码，我无法完全掌握这个技巧的位置，因为他们的大多数JS都被大大缩小了。关于如何实现这一目标的任何想法？

也许有些JS魔术是这样的（？）：

$(window).scroll(function(){
    var fixIT = $(this).scrollTop() >= navPos;
    var setPos = fixIT ? 'fixed' : 'relative' ;
    var logoSH = fixIT ? 'show' : 'hide' ;

    $('#nav').css({position: setPos});
    $('#mini-logo')[logoSH](300);
});

思想？

3 个答案:

答案 0 :(得分：4)

如果您不希望在导航栏的后台进行转换，则无需在您的代码中添加js。您可以使用媒体查询事件和css进行简单的操作。

在上面的代码片段中，我将所有导航栏都包含在一个类＆＃34; checkmate＆＃34;并为＆＃34;视图＆＃34;添加了媒体查询当窗口在640px或更低时。

＆＃13;
＆＃13; 
.acLogo {
    background-image : url("http://placehold.it/120x50");
    background-size: 100%;
    height: 50px;
    width: 120px;
    padding-top: 15px;
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall {
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help {
    margin-top: 10px;
}
.new-account {
    display: block;
    margin-top: 10px;
}
img.user-summary {
    max-width: 100%;
    height: auto;
}
div.user-summary {
    margin: 10px auto;
}
div.user-summary > img {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 5px;
}
div.user-name {
    margin: 15px 0 0 0;
    font-style: italic;
    display: block;
}
div.user-status {
    font-weight: bold;
}

.checkmate {
    position:fixed!important;
    width:100%;
    margin:0 auto;
    z-index: 99;
}

.the_content {
    position: relative;
    top:130px;
}

@media only screen and (max-width:767px) {

    .the_content {
        position: relative;
        top:400px;
    }
}
@media only screen and (max-width:640px) {

    .checkmate {
        position: relative!important;
    }
    .the_content {
        position: relative;
        top:0px;
    }
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index,follow" />
    <meta name="title" content="My App" />
    <link href="css/style3.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
          integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
          crossorigin="anonymous">
<body>
<div class="checkmate">
    <nav class="navbar navbar-default checkmate">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand acLogo" href="/"></a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="/features"><b>FEATURES</b></a></li>
                    <li><a href="/compare"><b>COMPARE US</b></a></li>
                    <li><a href="/pricing"><b>FIZZBUZZ</b></a></li>
                    <li><a href="/company"><b>FOOBAR</b></a></li>
                    <li><a href="/docs"><b>DOCS</b></a></li>
                </ul><form action="/app/dashboard/search" method="POST">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/app/dashboard">
                                <input class="btn btn-success" type="button" value="Sign up" /></a></li>
                        <li><a href="/app/dashboard">
                                <input class="btn btn-link" type="button" value="Sign in" /></a></li>
                    </ul></form>
            </div>
        </div>
    </nav>
</div>
<div class="the_content">
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
    lel<br>
    lol<br>
    lall<br>
    lesdl<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"
        integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="
        crossorigin="anonymous">
</script>
<script type="text/javascript">
    $('.orgSelector').dropdown();
    $('.orgSelector').tooltip();
</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您有2个选项，无需额外的html标记或CSS：

  1. 添加滚动事件处理程序。

    使用此功能，您可以添加/删除班级navbar-fixed-top。使这项工作成功的是，当有人滚动页面时，navbar位置会更改为position: fixed，这会使其保持原位。

  2. 将navbar-fixed-top添加到nav元素的课程中。

    这样，如果在滚动期间不需要额外的样式，则根本不需要捕捉滚动。

    3. 此外，根据this post和bootstrap文档，您可能需要在正文（或navbar后面的元素）上添加额外的填充以弥补navbar＆＃ 39;在position: fixed时的高度，或者它可以隐藏一些页面内容。如果这导致您发出，请告诉我，我会帮助您解决问题。

    $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $("#navbar").addClass('navbar-fixed-top');
    } else {
      $("#navbar").removeClass('navbar-fixed-top');
    }

});

    fiddle is here

    的更新

    如果您想在其position: fixed处添加其他样式，只需将其添加到自定义CSS 

    .navbar-fixed-top {
  background-color: lime;
}

    fiddle with added CSS rule

    的另一次更新

    如果你想在其他滚动位置做其他事情，你只需更新你的事件处理程序。

    $(window).scroll(function(){
    var st = $(this).scrollTop();
    var el = $("#navbar");
    if (st > 0) {
      el.addClass('navbar-fixed-top');
      if (st > 50) {
        el.addClass('navbar-custom');
      } else {
        el.removeClass('navbar-custom');
      }
    } else {
      el.removeClass('navbar-fixed-top navbar-custom');
    }        
});

    您的fiddle with added a second CSS rule

    的又一次更新

答案 2 :(得分：1)

我检查了你的代码。

您必须使用nav进行细微更改。

以下是更新后的代码：https://jsfiddle.net/oh69hq71/9/

＆＃13;
＆＃13; 
jQuery("document").ready(function($){
    $('.orgSelector').dropdown();
			$('.orgSelector').tooltip();
  
    var nav = $('.nav-container');
    
    $(window).scroll(function () {
        if ($(this).scrollTop() > 136) {
            nav.addClass("f-nav");
        } else {
            nav.removeClass("f-nav");
        }
    });
 
});
＆＃13; 
.acLogo {
	background-image : url("http://placehold.it/120x50");
        background-size: 100%;
	height: 50px;
        width: 120px;
    padding-top: 15px;        
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall {
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help {
    margin-top: 10px;
}
.new-account {
    display: block;
    margin-top: 10px;
}
img.user-summary {
  max-width: 100%;
  height: auto;
}
div.user-summary {
  margin: 10px auto;
}
div.user-summary > img {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0 5px;
}
div.user-name {
  margin: 15px 0 0 0;
  font-style: italic;
  display: block;
}
div.user-status {
  font-weight: bold;
}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
		</script>

<nav class="navbar navbar-inverse navbar-fixed-top">
	        <div class="container-fluid">
	          <div class="navbar-header">
	            <a class="navbar-brand acLogo" href="/"></a>
	          </div>
	          <div>
	            <ul class="nav navbar-nav">
 	              <li><a href="/features"><b>FEATURES</b></a></li>
	              <li><a href="/compare"><b>COMPARE US</b></a></li>
	              <li><a href="/pricing"><b>FIZZBUZZ</b></a></li>
	              <li><a href="/company"><b>FOOBAR</b></a></li>
	              <li><a href="/docs"><b>DOCS</b></a></li>
	            </ul><form action="/app/dashboard/search" method="POST">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/app/dashboard">
<input class="btn btn-success" type="button" value="Sign up" /></a></li>
    			<li><a href="/app/dashboard">
<input class="btn btn-link" type="button" value="Sign in" /></a></li>
                  </ul></form>
	          </div>
	        </div>
	      </nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题