Question

我正在使用 bootstrap 做一个网页。主导航位于固定的顶部位置。子导航位于横幅下方。滚动时，两者都应位于页面顶部，子导航应在主导航下方停止，背景颜色会发生变化。有人可以帮帮我吗？

＆＃13;

if ($scope.files.startsWith("image/")) {
    console.log("You dragged an image file");
    // or whatever your logic is
}

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');


<style type="text/css">

.innernav{
	background-color:#FFF;
	font-family: 'Droid Serif', serif;
    color:#212121;
	font-size:14px;
	text-transform:uppercase;
	margin-bottom:20px;
}
.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
    padding-left: 0;
    padding-right: 0;
}
.innernav .navbar-inner > .container {text-align:center; }

.inner-banner{
	height:430px;}
	
.inside{
	background:url(../images/inside_bg.png) repeat-x;
	background-position:50% 50%;}
	
.inside .navbar-nav{
	background-color:#FFF;
}
.no-horizontal-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
}
.affix {
	top: 0;
	width: 100%;
	background-color: #d52027;
}

＆＃13;

这是我的代码 https://jsfiddle.net/prasha/zd6yecgm/

Answer 1

一些更改HTML

<nav id="navigation" class="" data-spy="affix" data-offset-top="400">
          <div class="container text-center">
            <div id="navbar" class="navbar-collapse">
              <ul class="nav navbar-nav">
                <li><a href="#">Overview</a></li>
                <li><a href="#">Our Story</a></li>
                <li><a href="#">Our Team</a></li>
                <li><a href="#">Global presence</a></li>
                <li><a href="#">Certification</a></li>
                <li><a href="#"> Our Facilities</a></li>
              </ul>
            </div>
          </div>
        </nav>

CSS

.affix {
    top: 50px;
    width: 100%;
    background-color: #d52027;
}

https://jsfiddle.net/zd6yecgm/1/

两个导航主要导航在固定顶部和子导航stickey

1 个答案: