代码之家 › 专栏 › 技术社区 › lena

Bootstrap 3将导航栏固定在顶部-滚动时变小

fixed navbar hide twitter-bootstrap

lena · 技术社区 · 11 年前

我有一个固定顶部导航栏。滚动侧边时,它会向下移动。现在的问题是我不知道如何“拆分”导航栏。因为我有徽标和按钮,但我希望在导航栏的右上方有社交媒体图标。当我向下滚动侧边时,这些应该消失,但按钮和徽标应该保留。如何做到这一点?这是导航条代码:

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="brand" href="#"><img src="Materialien/LogoV2_300x75_72ppi.png" alt="Design und Data" width="50%" height="50%" /></a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Home</a></li>
        <li><a href="#about">Leistungen</a></li>
        <li><a href="#contact">Ãber Uns</a></li>
        <li><a href="#contact">Team</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Aktuelles <b class="caret"></b></a>
          <ul class="dropdown-menu">
              <li><a href="#">Alle Artikel</a></li>
         </ul>
        </li>
        <li><a href="#contact">Kunden</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Jobs <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Alle Jobs</a></li>
            </ul>
        </li>
        <li><a href="#contact">Kontakt</a></li>
   <form class="navbar-search">
            <input type="text" class="search-query span3" placeholder="Search">
        </form>

    </ul>
  </div>
</div>

1 回复 | 直到 10 年前

Manuel Manhart 11 年前

1.在 <div class="collapse navbar-collapse"> 在div中 <div class="social-icons">

2.添加以下javascript:

<script>
    $(document).scroll(function() {
        $("#navbar").toggleClass("tiny",$(document). scrollTop() > 50);
    });
</script>

3.在css中添加:

.tiny .social-icons {
    display: none;
}

当你向下移动50个像素后,你的社交图标将不可见。

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前