Аффикс верхней панели навигации

Это сводит меня с ума :(

У меня 3 проблемы с моим кодом.

1. Верхняя навигационная панель не отвечает на плагин аффикса. Страница прокручивается, но не прикрепляется к верхней части. То же самое и с вертикальным аффиксом. У меня есть изображение справа от страницы, которое тоже делает не отвечать атрибутом data-affix.

2. Контейнер, расположенный под навигационной панелью, перекрывается навигационной панелью. Но когда я меняю атрибут margin-top, все в порядке. Можно ли это исправить без атрибута margin-top?

3. Я разместил 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>


html twitter-bootstrap twitter-bootstrap-3 navbar affix
person Vivek    schedule 29.06.2017    source источник
comment
пожалуйста, кто-нибудь, помогите мне в этой проблеме   -  person Vivek    schedule 29.06.2017
comment
Вставка вашего кода в Bootply и аффикс, кажется, работает должным образом: bootply.com/GGMa4nGOTL не забудьте включить JS Bootstrap?   -  person Robert    schedule 29.06.2017
comment
Да, я тоже включил bootstrap JS   -  person Vivek    schedule 30.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы зафиксировать панель навигации в верхней части экрана (ваш вопрос очень неясен, поэтому я предполагаю, что это то, о чем вы спрашиваете), вам не нужен плагин... 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

person Tom Withers    schedule 30.06.2017
comment
Эта панель навигации закреплена вверху. Извините, что это не мой обязательный ответ. У меня есть изображение над панелью навигации, и при прокрутке панель навигации должна быть прикреплена кверху :) - person Vivek; 30.06.2017
comment
подождите так полноэкранное изображение и по мере прокрутки вниз навбар собирается и закрепляется вверху? У меня есть это на моем личном ноутбуке дома, я обновлю свой ответ, когда вернусь с работы. - person Tom Withers; 30.06.2017