顶部导航栏词缀答案

【问题标题】：Top nav bar affix顶部导航栏词缀
【发布时间】：2017-06-29 07:55:02
【问题描述】：

这让我发疯了:(

我的代码有 3 个问题。

1.顶部导航栏没有响应插件插件。页面滚动但不固定到顶部。垂直词缀也是类似的情况。我在页面右侧有一个图像它也不会使用 data-affix 属性响应。

2.放置在导航栏下方的容器被导航栏覆盖。但是当我更改margin-top属性时它很好。可以在没有margin-top属性的情况下修复它吗？

3.我在页面底部放置了 2 个页脚，其中第 2 个页脚的边距与其中的内容重叠。如果我更改边距属性，这工作正常。如何在不更改边距属性的情况下解决此问题?

欢迎任何帮助:)

P.S：我已经在代码中有问题的地方发表了评论。我也搜索了stackoverflow，但没有找到适合我的解决方案。

.navbar {
  position: absolute;
  width: 100%;
  z-index: 300;
  margin-bottom: 0;
  border-radius: 0;
  background-color: #595959;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: white;
  background-color: black;
}

.navbar .navbar-nav>li>a {
  line-height: 18px;
}

.navbar-default .navbar-nav>li>a {
  color: white;
}

@media (max-width: 767px) {
  .block {
    width: 100%;
    height: 100%;
    background-size: cover;
  }
}

html,
body {
  height: 100%;
  background-color: #ffffff;
}

.social-fb:hover {
  transform: scale(1.3);
  color: #3b5998;
}

.social-twitter:hover {
  transform: scale(1.3);
  color: #55ACEE;
}

.social-google:hover {
  transform: scale(1.3);
  color: #dd4b39;
}

.social-mail:hover {
  transform: scale(1.3);
  color: #dd4b39;
}

.fa {
  transition: transform 0.35s ease-out;
}

.footer {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome page</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link href="./css/style.css" rel="stylesheet">

  <script src="https://use.fontawesome.com/194c7d5d79.js"></script>

</head>

<body>
  <div class="container-fluid">
    <img src="https://www.google.co.in/imgres?imgurl=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F2%2F2f%2FGoogle_2015_logo.svg%2F1200px-Google_2015_logo.svg.png&imgrefurl=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_Google_products&docid=vo9Ela-UL0h7xM&tbnid=pSYvYJg-2jDJSM%3A&vet=10ahUKEwjZ6oXfx-LUAhVLTrwKHVV8BgUQMwhWKAIwAg..i&w=1200&h=406&bih=673&biw=1301&q=google&ved=0ahUKEwjZ6oXfx-LUAhVLTrwKHVV8BgUQMwhWKAIwAg&iact=mrc&uact=8"
      alt="" height="50px" width: "75px">
  </div>

  <nav class="navbar navbar-default" data-spy="affix" data-offset-top="197" role="navigation" style="height:50px;"><!--This nav bar -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav" style="font-size:18px;letter-spacing:5px;">
        <li><a href="#"><i class="fa fa-fw fa-home"></i>HOME</a></li>
        <li><a href="#">ABOUT</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right" style="font-size:18px;">
        <li><a href="logout.php"><i class="fa fa-fw fa-sign-out"></i> LOGOUT</a></li>
      </ul>
    </div>
  </nav>




  <div class="container-fluid text-center" style="margin-top:100px;">
    <div class="row content">
      <div class="col-lg-2 col-sm-2 col-md-2 sidenav" style="background-color:#f2f2f2;height:100%;">
        <p><a href="https://www.google.com">GOOGLE</a></p>
        <p><a href="https://www.gmail.com">GMAIL</a></p>
        <p><a href="https://wwww.facebook.com">FACEBOOK</a></p>
        <p><a href="https://www.whatsapp.com">WHATSAPP</a></p>
      </div>
      <div class="col-lg-8 col-md-8 col-sm-8 text-left">
        <h3>Welcome
          
        </h3>
        <p>
          <h2>What is Bootstrap</h2>
          Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also
          it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components,
          as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list
          of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was
          also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms,
          buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
          Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
          Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography,
          forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
          Extensive list of components Bundled Javascript plugins
        </p>
        <p>
          Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also
          it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components,
          as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list
          of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was
          also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms,
          buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
          Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
          Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography,
          forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
          Extensive list of components Bundled Javascript plugins
        </p>
        <p>
          Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was also programmed to support both HTML5 and CSS3. Also
          it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components,
          as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons) Extensive list
          of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. Bootstrap was
          also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography, forms,
          buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
          Extensive list of components Bundled Javascript plugins Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
          Bootstrap was also programmed to support both HTML5 and CSS3. Also it is called Front-end-framework. Bootstrap is a free collection of tools for creating a websites and web applications. It contains HTML and CSS-based design templates for typography,
          forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Some Reasons for programmers preferred Bootstrap Framework Easy to get started Great grid system Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
          Extensive list of components Bundled Javascript plugins
        </p>

      </div>
      <div class="col-lg-2 col-sm-2 col-md-2 sidenav">
        <img src="./images/i.jpg" alt="" height="500" width="100%">
        <!-- this image not working with affix  insert image of your choice and check it-->


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




  <nav class="navbar navbar-default navbar-bottom" style="height:200px;background-color:whitesmoke;">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-sm-6 col-md-6">
          <center>
            <h2>Contact us</h2>
            <address>
                            Coimbatore <br>
                            India <br>
                        </address>
            <a href="https://www.facebook.com"><i class="fa fa-facebook-square fa-3x social-fb"></i></a>&nbsp;&nbsp;
            <a href="https://twitter.com"><i class="fa fa-twitter-square fa-3x social-twitter"></i></a>&nbsp;&nbsp;
            <a href="https://plus.google.com"><i class="fa fa-google-plus-square fa-3x social-google"></i></a>&nbsp;&nbsp;
            <a href="#"><i class="fa fa-envelope-square fa-3x social-mail"></i></a>&nbsp;&nbsp;

          </center>
        </div>
      </div>
      <div class="row" style="position:fixed-bottom;margin-top:30px;"><!-- This 2nd footer -->
        <div class="col-lg-12 col-sm-12 col-md-12">
          <center>
            <h4>Powered by GOOGLE</h4>
          </center>
        </div>
      </div>
    </div>

  </nav>

</body>

</html>

【问题讨论】：

请有人帮我解决这个问题
将您的代码粘贴到 Bootply 和 affix 似乎按预期运行：bootply.com/GGMa4nGOTL您是否记得包含 Bootstrap 的 JS？
是的，我也包含了 bootstrap JS

标签： html twitter-bootstrap twitter-bootstrap-3 navbar affix

【解决方案1】：

要将导航栏固定到屏幕顶部（您的问题非常不清楚，所以我猜这就是您要问的）您不需要插件... Bootstrap 可以通过默认设置来做到这一点。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

请参阅此 Codepen 以获取示例：

https://codepen.io/GuruTom/pen/MoQGXX

【讨论】：

此导航栏固定在顶部。抱歉，这不是我需要的答案。我在导航栏上方有一个图像，滚动导航栏时应固定在顶部:)
等待全屏图像，当您向下滚动时，导航栏被收集并固定在顶部？我在家里的个人笔记本电脑上有这个，我会在下班回家时更新我的答案