Bootstrap/CSS: сделать мой контент ниже заголовка при прокрутке

У меня есть эта простая html-страница, с css она работает хорошо, за исключением того, что когда я прокручиваю страницу вниз, форма ввода находится над заголовком. Я хотел бы, чтобы заголовок всегда был над содержимым при прокрутке.

Кто-нибудь может помочь?

.sticky {
  position: sticky;
  top: 0;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

#i li {
  float: left;
}

#i li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#i li a:hover {
  border-radius: 0px 0px 10px 10px;
  background-color: rgb(43, 137, 226);
}

.active {
  background-color: rgb(43, 137, 226);
}

#footer-id {
  background-color: blue;
}

#MyForm .contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

#MyForm .fixed-header {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 999;
}

#MyForm .contact-form .form-control {
  border-radius: 1rem;
}
#MyForm .contact-image {
  text-align: center;
}
#MyForm .contact-image img {
  border-radius: 6rem;
  width: 11%;
  margin-top: -3%;
  transform: rotate(29deg);
}
#MyForm .contact-form form {
  padding: 14%;
}
#MyForm .contact-form form .row {
  margin-bottom: -7%;
}
#MyForm .contact-form h3 {
  margin-bottom: 8%;
  /* margin-top: -10%; */
  text-align: center;
  color: #0062cc;
}
#MyForm .contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
#MyForm .btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.input-group {
  position: relative;
  width: 100%;
}
.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  /* border: 1px solid #eaeaea; */
  padding-left: 100px;
}
.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  top: 0;
  width: 100px;
  font-weight: 100;
}

<!DOCTYPE html>
<html lang = "en">
<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  


<!--The content below is only a placeholder and can be replaced.-->

<span id = "i">
  <ul class = "sticky">
    <li>
      <a
        href = "#"
        
        >Home</a
      >
    </li>
    <li>
      <a
        href = "#news"
        
        >News</a
      >
    </li>
    <li>
      <a
        href = "#contact"
        >Contact</a
      >
    </li>
    <li>
      <a
        href = "#about"
        
        >About</a
      >
    </li>
    <li>
      <a
        href = "#test"
        
        >Test</a
      >
    </li>

    <ul class = "nav navbar-nav pull-right">
      <li class = "nav"><a href = "#">Contact</a></li>
    </ul>
    <ul class = "nav navbar-nav pull-right">
      <li class = "nav">
        <a href = "#ta" (click) = "scrollToElement(con)">Target</a>
      </li>
    </ul>
  </ul>
</span>



  <div #con class = "fixed-header">
    <br />
    <br />
    

    <!-- <div  class = "input-group">
        <input type = "text">
        <label>Some Text</label>
        </div> -->

    <div id = "MyForm">
      <div class = "container contact-form">
        <div class = "contact-image">
          <img src = "assets/rocket_contact.png" alt = "rocket_contact" />
        </div>
        <form
          [formGroup] = "productForm"
          (ngSubmit) = "sendMail(productForm.value)"
        >
          <h3>Merci de nous laisser un message</h3>

          <!-- <div class = "row"> -->
          <div class = "col-md-12">
            <div class = "form-group" id = "your_name">
              <input
                formControlName = "name"
                type = "text"
                name = "txtName"
                class = "form-control"
                placeholder = "Your Name *"
                value = ""
              />
            </div>
            <div class = "form-group">
              <input
                formControlName = "email"
                type = "text"
                name = "txtEmail"
                class = "form-control"
                placeholder = "Your Email *"
                value = ""
              />
            </div>
            <div class = "form-group">
              <input
                formControlName = "number"
                type = "text"
                name = "txtPhone"
                class = "form-control"
                placeholder = "Your Phone Number *"
                value = ""
              />
            </div>
          </div>
          <div class = "col-md-12">
            <div class = "form-group">
              <textarea
                formControlName = "message"
                name = "txtMsg"
                class = "form-control"
                placeholder = "Your Message *"
                style = "width: 100%; height: 150px;"
              ></textarea>
            </div>

            <div class = "form-group">
              <input
                type = "submit"
                name = "btnSubmit"
                class = "btnContact"
                value = "Send Message"
              />
            </div>
          </div>
          <!-- </div> -->
        </form>
      </div>
    </div>
  </div>




</body>
</html>

добавьте z-index в свое меню, это исправит

— 06.02.2019 17:09

w3schools.com/howto/howto_js_navbar_sticky.asp

— 06.02.2019 17:10

html css

06.02.2019 17:07

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

137

Ответы 1

Когда у элемента есть position: absolute или position: fixed, бывает, что он может пересекаться с другими элементами. Когда это произойдет, контейнер, который будет отображаться выше, будет иметь более высокое значение z-index. Если z-index не задан, то минимально возможное.

По этой причине вы можете просто добавить:

z-index: 1;

в ваш класс sticky:

.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

#i li {
  float: left;
}

#i li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#i li a:hover {
  border-radius: 0px 0px 10px 10px;
  background-color: rgb(43, 137, 226);
}

.active {
  background-color: rgb(43, 137, 226);
}

#footer-id {
  background-color: blue;
}

#MyForm .contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

#MyForm .fixed-header {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 999;
}

#MyForm .contact-form .form-control {
  border-radius: 1rem;
}
#MyForm .contact-image {
  text-align: center;
}
#MyForm .contact-image img {
  border-radius: 6rem;
  width: 11%;
  margin-top: -3%;
  transform: rotate(29deg);
}
#MyForm .contact-form form {
  padding: 14%;
}
#MyForm .contact-form form .row {
  margin-bottom: -7%;
}
#MyForm .contact-form h3 {
  margin-bottom: 8%;
  /* margin-top: -10%; */
  text-align: center;
  color: #0062cc;
}
#MyForm .contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
#MyForm .btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.input-group {
  position: relative;
  width: 100%;
}
.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  /* border: 1px solid #eaeaea; */
  padding-left: 100px;
}
.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  top: 0;
  width: 100px;
  font-weight: 100;
}

<!DOCTYPE html>
<html lang = "en">
<head>
  <title>Bootstrap Example</title>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  


<!--The content below is only a placeholder and can be replaced.-->

<span id = "i">
  <ul class = "sticky">
    <li>
      <a
        href = "#"
        
        >Home</a
      >
    </li>
    <li>
      <a
        href = "#news"
        
        >News</a
      >
    </li>
    <li>
      <a
        href = "#contact"
        >Contact</a
      >
    </li>
    <li>
      <a
        href = "#about"
        
        >About</a
      >
    </li>
    <li>
      <a
        href = "#test"
        
        >Test</a
      >
    </li>

    <ul class = "nav navbar-nav pull-right">
      <li class = "nav"><a href = "#">Contact</a></li>
    </ul>
    <ul class = "nav navbar-nav pull-right">
      <li class = "nav">
        <a href = "#ta" (click) = "scrollToElement(con)">Target</a>
      </li>
    </ul>
  </ul>
</span>



  <div #con class = "fixed-header">
    <br />
    <br />
    

    <!-- <div  class = "input-group">
        <input type = "text">
        <label>Some Text</label>
        </div> -->

    <div id = "MyForm">
      <div class = "container contact-form">
        <div class = "contact-image">
          <img src = "assets/rocket_contact.png" alt = "rocket_contact" />
        </div>
        <form
          [formGroup] = "productForm"
          (ngSubmit) = "sendMail(productForm.value)"
        >
          <h3>Merci de nous laisser un message</h3>

          <!-- <div class = "row"> -->
          <div class = "col-md-12">
            <div class = "form-group" id = "your_name">
              <input
                formControlName = "name"
                type = "text"
                name = "txtName"
                class = "form-control"
                placeholder = "Your Name *"
                value = ""
              />
            </div>
            <div class = "form-group">
              <input
                formControlName = "email"
                type = "text"
                name = "txtEmail"
                class = "form-control"
                placeholder = "Your Email *"
                value = ""
              />
            </div>
            <div class = "form-group">
              <input
                formControlName = "number"
                type = "text"
                name = "txtPhone"
                class = "form-control"
                placeholder = "Your Phone Number *"
                value = ""
              />
            </div>
          </div>
          <div class = "col-md-12">
            <div class = "form-group">
              <textarea
                formControlName = "message"
                name = "txtMsg"
                class = "form-control"
                placeholder = "Your Message *"
                style = "width: 100%; height: 150px;"
              ></textarea>
            </div>

            <div class = "form-group">
              <input
                type = "submit"
                name = "btnSubmit"
                class = "btnContact"
                value = "Send Message"
              />
            </div>
          </div>
          <!-- </div> -->
        </form>
      </div>
    </div>
  </div>




</body>
</html>

06.02.2019 17:11

Другие вопросы по теме

Как выделить/навести/щелкнуть выбранную группу последовательных ячеек строки в таблице HTML

Настройка семейства шрифтов Semantic UI React, но не удается найти файл src/site/globals/site.variables для этого. Есть ли другой способ?

Как сделать так, чтобы появляющийся текст на фоновом изображении не мешал друг другу и другому тексту?

Структура URL для вкладок

Предотвратить разрыв строки псевдоэлементом сам по себе

В чем разница между :nth-child(1) и :first-child в псевдоселекторах css, есть ли какие-то преимущества в выборе одного метода над другим?

В гибкой модели элемент с разрывом строки обрезает предыдущий элемент

Изменить цвет SVG img src

Прокрутка должна быть на дочернем элементе, а не на родительском элементе с изменяемым размером

Класс добавления/удаления JQuery не работает должным образом

Bootstrap/CSS: сделать мой контент ниже заголовка при прокрутке

Ответы 1

Другие вопросы по теме

Похожие вопросы