Question

如何使用Bootstrap 3创建在用户开始向下滚动后缩小到一半大小的Fixed-Top NavBar？

以下是我创建的NavBar。我希望菜单向右折叠，徽标向左缩小一半，搜索栏在中心保留6列。但我不知所措。

HTML

    <div class="container-fluid">
    <div id="navbar"> 
        <!-- Logo Image -->
        <div id="nav-dsktp-logo" class="col-md-3">
            <a class="nav-img-link" href="#"><img id="img-dsktp-header" class="img-responsive" src="/assets/frontend/img/header-logo.png" style="width:auto;"></a>                
        </div>
        <!-- Search -->
        <div id="nav-dsktp-search" class="col-md-6">
            <ul id="nav-search-ul" class="nav navbar-nav">
                <li id="nav-search-li">
                    {{Form::open(array('url' => '/search-all', 'class' => 'navbar-form col-sm-12 navbar-dsktp-form', 'role' => 'search', 'method' => 'POST'))}}
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search" name="q">
                    </div>
                    <button type="submit" class="btn"><i class="fa fa-search"></i></button>
                    {{Form::close()}}
                </li>
            </ul>
        </div>
        <!-- Links -->
        <div id="nav-dsktp-links" class="col-md-7">
            <ul class="nav navbar-nav">
                @foreach( Navigation::where('parent', '=', 0)->orderBy('order', 'asc')->get() as $idx => $item )
                <li class="
                    @if(count($item->children) > 0 ) item-with-ul @endif
                    @if($idx == 0) active @endif
                    ">
                    <a href="{{ $item->url }}">
                        {{ $item->title }}
                    </a>
                    @if( count( $item->children ) > 0 )
                    <ul class="dropdown-menu">
                        @foreach( $item->children as $child )
                        <li><a href="@if($child->link_type == 'category')/category/@endif{{$child->url}}"> {{ $child->title  }}</a></li>
                        @endforeach
                    </ul>
                    @endif
                </li>
                @endforeach
           </ul>
        </div> 

        <!-- User Sign Up / Log In / My Cart -->
        <div id="nav-dsktp-user-links" class="col-md-2">
            <ul class="navbar navbar-nav">                               
                <li class="pull-right shopping-cart">
                    @include('frontend.widgets.shopping-cart-box')
                </li>
                @if (Auth::check())
                    <li class="pull-right">
                        <a href="/my-account"><i class="fa fa-cog hidden-xs"></i>&nbsp;My Account</a>
                    </li>
                @endif
                <li class="pull-right">
                    @if (Auth::check())
                        <a href="/user/logout"><i class="fa fa-sign-out"></i>&nbsp;Log Out</a>
                    @else
                        <a class="popup-text" href="#login-dialog" data-effect="mfp-move-from-top"><i class="fa fa-sign-in hidden-xs"></i>&nbsp;Log In</a>
                    @endif
                </li>
                @if(!Auth::check())
                <li class="pull-right">
                    <a href="/sign-up" ><i class="fa fa-edit hidden-xs"></i>&nbsp;Sign Up</a>
                </li>
            @endif        
            </ul>
        </div>

    </div>
</div>

CSS

.navbar-mvo {
  background-color: #35485F;
  border: none;
}
.navbar-mvo #nav-dsktp-logo {
  height: 68px;
}
.navbar-mvo #nav-dsktp-logo #img-dsktp-header {
  margin-top: 11px;
}
.navbar-mvo #nav-dsktp-search {
  height: 45px;
}
.navbar-mvo #nav-dsktp-search #nav-search-ul {
  width: 100%;
}
.navbar-mvo #nav-dsktp-search #nav-search-li {
  width: 100%;
  position: relative;
}
.navbar-mvo #nav-dsktp-search #nav-search-li button {
  position: absolute;
  top: 0;
  right: 0;
  height: 34px;
}
.navbar-mvo #nav-dsktp-links {
  height: 45px;
}
.navbar-mvo #nav-dsktp-user-links {
  height: 45px;
  position: absolute;
  top: 22px;
  right: 80px;
}
.navbar-mvo #nav-dsktp-user-links a {
  font-size: 1.3rem;
}
.navbar-mvo .navbar-nav > li {
  list-style: none;
}
.navbar-mvo .navbar-nav > li > a {
  color: #fff;
  font-size: 1.2rem;
  padding: 10px;
}
.navbar-mvo .navbar-nav > li > a:hover {
  background-color: #495a6f;
}
.navbar-mvo .navbar-nav > li > a.nav-img-link {
  padding: 15px 0;
}

@media (min-width: 768px) {
  .navbar-form {
    width: 100%;
  }
  .navbar-form .form-control {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
  }
  .navbar-form .form-group {
    width: 100%;
  }
  .navbar-form .form-group input {
    width: 100%;
  }
}

Answer 1

你将不得不使用JavaScript并在这样的滚动上写一下：

function init() {
    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 300, // shrink when scrolled 300px
            header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller");
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });
}
window.onload = init();

怎么可以......使用Bootstrap创建缩小到一半大小的Fixed-Top NavBar

1 个答案: