稍微滚动后，粘性导航栏就不再固定了

Question

我正在使用 HTML、CSS 和 Bootstrap4。我需要一个在我滚动时应该固定的导航栏。我做了一切，但经过一点滚动后，导航栏再次无法修复。我想知道是否有任何方法可以用 bootstrap 解决这个问题，但如果不能，请告诉我如何使用 Css。谢谢

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    font-family: 'Playfair Display', serif !important;
    color: white !important;
}

#main-logo {
    width: 60px;
}

#two-logos-right {
    width: 30px;
    height: 30px;
}

#two-logos-left {
    width: 40px;
}

#a-links {
    text-decoration: none;
    color: black;
}

/* On the main nav bar */
#little-logo-main-nav {
    width: 30px;
}

/* center the little h&m icon */
#little-icon {
    float: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*Two images that are half the page*/
#img-half {
    width: 50%;
}

/* positioning */
#text-on-two-car-half-page {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* magazine */
#cards-magazine {
    width: 400px;
}

#a-links-card-magazine {
    position: absolute;
    top: 98%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    color: red;
}

<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand"/>
    <meta name="description" content="H&M clothing shop"/>
    <meta name="author" content="Ali Bolouki"/>
    <!--Title bar-->
    <link rel="shortcut icon" href="images/title bar/Logo.svg"/>
    <title>H&M | Fashion Clothing Store and Online Shop</title>
    <!--CSS3-->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!--Bootstrap4-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>
<body id="body">
        <div class="container-fluid mb-2">
            <div class="row">
                <!-- Two icons in left side -->
                <a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
                    <span>Andriod</span>
                    <img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app"/>
                </a>
                <a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
                    <span>ios</span>
                    <img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app"/>
                </a>
                <!--Main icon | H&M-->
                <img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo"/>
                <!-- Two icons in right side -->
                <a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
                    <span>Sign in</span>
                    <img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon"/>
                </a>
                <a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
                    <span>Bag</span>
                    <img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon"/>
                </a>
            </div>
        </div> 
        
    <header class="sticky-top">
        <!-- The main navbar menu -->
        <div class="container-fluid">
            <div class="row">
                <nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
                    <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                      <span class="navbar-toggler-icon"></span>
                    </button>
                  
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                      <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a id="a-links" class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a id="a-links" class="nav-link" href="#">Man</a>
                        </li>
                        <li class="nav-item">
                            <a id="a-links" class="nav-link" href="#">Woman</a>
                        </li>
                        <li class="nav-item">
                            <a id="a-links" class="nav-link" href="#">Kids</a>
                        </li>
                        <li class="nav-item">
                            <a id="a-links" class="nav-link" href="#">Baby</a>
                        </li>
                        <li class="nav-item">
                            <a id="a-links" class="nav-link" href="#body">&#8593;</a>
                        </li>
                        <li class="nav-item">
                            <a id="a-links" class="nav-link" href="#">&#8595;</a>
                        </li>
                        <li class="nav-item d-none d-md-block" id="little-icon">
                            <img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon"/>
                        </li>
                        <!-- Dropdown menu -->
                        <li class="nav-item dropdown d-md-none d-block">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                More
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Sign in</a>
                                <a class="dropdown-item" href="#">Youe Bag</a>
                                <a class="dropdown-item" href="#">ios App</a>
                                <a class="dropdown-item" href="#">Andriod App</a>
                            </div>
                          </li>
                      </ul>
                      <form class="form-inline my-2 my-lg-0">
                        <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
                      </form>
                    </div>
                  </nav>

            </div>
        </div>
    </header>
   
    <main id="main">
        <!--Carousel slider-->
        <div class="container-fluid">
            <div class="row">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                      <li data-target="#myCarousel" data-slide-to="1"></li>
                      <li data-target="#myCarousel" data-slide-to="2"></li>
                      <li data-target="#myCarousel" data-slide-to="3"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                      <div class="carousel-item" data-interval="3000">
                        <img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
                        <div class="carousel-caption">
                          <h3>Beauty with H&M</h3>
                          <p>Be simple!</p>
                        </div>
                      </div>
                  
                      <div class="carousel-item" data-interval="3000">
                        <img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
                        <div class="carousel-caption">
                          <h3>Be amazing with H&M</h3>
                          <p>Be rich</p>
                        </div>
                      </div>
                  
                      <div class="carousel-item" data-interval="3000">
                        <img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
                        <div class="carousel-caption">
                          <h3>New things</h3>
                          <p>We love to be new</p>
                        </div>
                      </div>

                      <div class="carousel-item active" data-interval="3000">
                        <img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
                        <div class="carousel-caption">
                          <h3>Everything is good</h3>
                          <p>Be happy</p>
                        </div>
                      </div>

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

        <!--Two images half the page-->
        <div class="container-fluid">
            <div class="row">
              <div id="img-half" class="card border-0">
                <img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
                <div class="card-img-overlay">
                  <p id="text-on-two-car-half-page" class="card-text">One store but</p>
                </div>
              </div>

              <div id="img-half" class="card border-0">
                <img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
                <div class="card-img-overlay">
                  <p id="text-on-two-car-half-page" class="card-text">more than one store</p>
                </div>
              </div>

            </div>
        </div>

        <!--Magazine-->
        <div class="container-fluid">
          <div class="row">
            
            <h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>

            <div class="card mx-auto" id="cards-magazine">
              <img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
              <div class="card-body">
                <p class="card-title text-center">Inside H&M</p>
                <h3 class="card-text text-center">A meadow of wildflowers</h3>
                <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
              </div>
            </div>

            <div class="card mx-auto" id="cards-magazine">
              <img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
              <div class="card-body">
                <p class="card-title text-center">Inside H&M</p>
                <h3 class="card-text text-center">The Colour Story Collection</h3>
                <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
              </div>
            </div>

            <div class="card mx-auto" id="cards-magazine">
              <img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
              <div class="card-body">
                <p class="card-title text-center">Inside H&M</p>
                <h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
                <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
              </div>
            </div>

          </div>
        </div>
    </main>
    <!--Bootstrap4-->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>

请运行我的代码并向下滚动以查看我要说的内容。

Answer 1

正文和 html 高度不应为 100%。 看起来这是导致粘性导航仅粘在页面的一部分的问题。我添加了一个边框和一些额外的 space 来演示您的粘性 div 如何根据正文中的滚动位置在 position: relative 和 position: fixed 之间交替：

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  font-family: 'Playfair Display', serif !important;
  color: white !important;
  border: 2px solid red;
}

#main-logo {
  width: 60px;
}

#two-logos-right {
  width: 30px;
  height: 30px;
}

#two-logos-left {
  width: 40px;
}

#a-links {
  text-decoration: none;
  color: black;
}


/* On the main nav bar */

#little-logo-main-nav {
  width: 30px;
}


/* center the little h&m icon */

#little-icon {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*Two images that are half the page*/

#img-half {
  width: 50%;
}


/* positioning */

#text-on-two-car-half-page {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* magazine */

#cards-magazine {
  width: 400px;
}

#a-links-card-magazine {
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: red;
}

<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
  <meta name="description" content="H&M clothing shop" />
  <meta name="author" content="Ali Bolouki" />
  <!--Title bar-->
  <link rel="shortcut icon" href="images/title bar/Logo.svg" />
  <title>H&M | Fashion Clothing Store and Online Shop</title>
  <!--CSS3-->
  <link rel="stylesheet" type="text/css" href="style.css" />
  <!--Bootstrap4-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>

<body id="body">



  <div class="container-fluid mb-2">
    <div class="row">
      <!-- Two icons in left side -->
      <a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
        <span>Andriod</span>
        <img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
      </a>
      <a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
        <span>ios</span>
        <img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
      </a>
      <!--Main icon | H&M-->
      <img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
      <!-- Two icons in right side -->
      <a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
        <span>Sign in</span>
        <img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
      </a>
      <a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
        <span>Bag</span>
        <img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
      </a>
    </div>
  </div>

  <header class="sticky-top">
    <!-- The main navbar menu -->
    <div class="container-fluid">
      <div class="row">
        <nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
          <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a id="a-links" class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Man</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Woman</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Kids</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Baby</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#body">&#8593;</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">&#8595;</a>
              </li>
              <li class="nav-item d-none d-md-block" id="little-icon">
                <img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
              </li>
              <!-- Dropdown menu -->
              <li class="nav-item dropdown d-md-none d-block">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    More
                  </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Sign in</a>
                  <a class="dropdown-item" href="#">Youe Bag</a>
                  <a class="dropdown-item" href="#">ios App</a>
                  <a class="dropdown-item" href="#">Andriod App</a>
                </div>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>

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

  <main id="main">
    <!--Carousel slider-->
    <div class="container-fluid">
      <div class="row">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>Beauty with H&M</h3>
                <p>Be simple!</p>
              </div>
            </div>

            <div class="carousel-item" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>Be amazing with H&M</h3>
                <p>Be rich</p>
              </div>
            </div>

            <div class="carousel-item" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>New things</h3>
                <p>We love to be new</p>
              </div>
            </div>

            <div class="carousel-item active" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>Everything is good</h3>
                <p>Be happy</p>
              </div>
            </div>

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

    </div>

    <!--Two images half the page-->
    <div class="container-fluid">
      <div class="row">
        <div id="img-half" class="card border-0">
          <img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
          <div class="card-img-overlay">
            <p id="text-on-two-car-half-page" class="card-text">One store but</p>
          </div>
        </div>

        <div id="img-half" class="card border-0">
          <img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
          <div class="card-img-overlay">
            <p id="text-on-two-car-half-page" class="card-text">more than one store</p>
          </div>
        </div>

      </div>
    </div>

    <!--Magazine-->
    <div class="container-fluid">
      <div class="row">

        <h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>

        <div class="card mx-auto" id="cards-magazine">
          <img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
          <div class="card-body">
            <p class="card-title text-center">Inside H&M</p>
            <h3 class="card-text text-center">A meadow of wildflowers</h3>
            <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
          </div>
        </div>

        <div class="card mx-auto" id="cards-magazine">
          <img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
          <div class="card-body">
            <p class="card-title text-center">Inside H&M</p>
            <h3 class="card-text text-center">The Colour Story Collection</h3>
            <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
          </div>
        </div>

        <div class="card mx-auto" id="cards-magazine">
          <img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
          <div class="card-body">
            <p class="card-title text-center">Inside H&M</p>
            <h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
            <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
          </div>
        </div>

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

  </main>



  <!--Bootstrap4-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>

要解决这个问题，只需删除高度值：

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    scroll-behavior: smooth;
    font-family: 'Playfair Display', serif !important;
    color: white !important;
}

根据 w3schools，sticky 定义为：

The element is positioned based on the user's scroll position A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1 with a -webkit- prefix.

CSS Position Property

带边框的完整代码片段和用于演示结果的额外 space：

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  scroll-behavior: smooth;
  font-family: 'Playfair Display', serif !important;
  color: white !important;
  border: 2px solid red;
}

#main-logo {
  width: 60px;
}

#two-logos-right {
  width: 30px;
  height: 30px;
}

#two-logos-left {
  width: 40px;
}

#a-links {
  text-decoration: none;
  color: black;
}


/* On the main nav bar */

#little-logo-main-nav {
  width: 30px;
}


/* center the little h&m icon */

#little-icon {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*Two images that are half the page*/

#img-half {
  width: 50%;
}


/* positioning */

#text-on-two-car-half-page {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* magazine */

#cards-magazine {
  width: 400px;
}

#a-links-card-magazine {
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  color: red;
}

<!-- In the name GOD who gave me this power -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Clothing Shop, H and M, H&M, Modeling, Clothing Brand" />
  <meta name="description" content="H&M clothing shop" />
  <meta name="author" content="Ali Bolouki" />
  <!--Title bar-->
  <link rel="shortcut icon" href="images/title bar/Logo.svg" />
  <title>H&M | Fashion Clothing Store and Online Shop</title>
  <!--CSS3-->
  <link rel="stylesheet" type="text/css" href="style.css" />
  <!--Bootstrap4-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <!-- Google fonts -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap" rel="stylesheet">
</head>

<body id="body">



  <div class="container-fluid mb-2">
    <div class="row">
      <!-- Two icons in left side -->
      <a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
        <span>Andriod</span>
        <img id="two-logos-left" src="images/header icons/icons8-android-64.png" alt="Android icon for download the app" />
      </a>
      <a id="a-links" class="mt-3 ml-3 d-sm-block d-none" href="#">
        <span>ios</span>
        <img id="two-logos-left" src="images/header icons/icons8-iphone-x-64.png" alt="ios icon for download the app" />
      </a>
      <!--Main icon | H&M-->
      <img id="main-logo" class="mx-auto mt-3" src="images/main logo/Logo.svg" alt="H and M red logo" />
      <!-- Two icons in right side -->
      <a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
        <span>Sign in</span>
        <img id="two-logos-right" src="images/header icons/download.svg" alt="Sign in icon" />
      </a>
      <a id="a-links" class="mr-3 mt-3 d-sm-block d-none" href="#">
        <span>Bag</span>
        <img id="two-logos-right" src="images/header icons/download (1).svg" alt="Shoping icon" />
      </a>
    </div>
  </div>

  <header class="sticky-top">
    <!-- The main navbar menu -->
    <div class="container-fluid">
      <div class="row">
        <nav class="col-12 navbar navbar-expand-sm navbar-light bg-light sticky-top">
          <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a id="a-links" class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Man</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Woman</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Kids</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">Baby</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#body">&#8593;</a>
              </li>
              <li class="nav-item">
                <a id="a-links" class="nav-link" href="#">&#8595;</a>
              </li>
              <li class="nav-item d-none d-md-block" id="little-icon">
                <img id="little-logo-main-nav" src="images/main logo/Logo.svg" alt="little H&M's icon" />
              </li>
              <!-- Dropdown menu -->
              <li class="nav-item dropdown d-md-none d-block">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    More
                  </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#">Sign in</a>
                  <a class="dropdown-item" href="#">Youe Bag</a>
                  <a class="dropdown-item" href="#">ios App</a>
                  <a class="dropdown-item" href="#">Andriod App</a>
                </div>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control col-md-8 mr-2 w-50" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>

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

  <main id="main">
    <!--Carousel slider-->
    <div class="container-fluid">
      <div class="row">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
          </ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="carousel-item" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (1).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>Beauty with H&M</h3>
                <p>Be simple!</p>
              </div>
            </div>

            <div class="carousel-item" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (2).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>Be amazing with H&M</h3>
                <p>Be rich</p>
              </div>
            </div>

            <div class="carousel-item" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (3).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>New things</h3>
                <p>We love to be new</p>
              </div>
            </div>

            <div class="carousel-item active" data-interval="3000">
              <img class="img-fluid" src="images/slider/hmgoepprod (4).jpg" alt="Model">
              <div class="carousel-caption">
                <h3>Everything is good</h3>
                <p>Be happy</p>
              </div>
            </div>

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

    </div>

    <!--Two images half the page-->
    <div class="container-fluid">
      <div class="row">
        <div id="img-half" class="card border-0">
          <img class="card-img-top" src="images/half the page/hmgoepprod.jpg" alt="Card image">
          <div class="card-img-overlay">
            <p id="text-on-two-car-half-page" class="card-text">One store but</p>
          </div>
        </div>

        <div id="img-half" class="card border-0">
          <img class="card-img-top" src="images/half the page/hmgoepprod (1).jpg" alt="Card image">
          <div class="card-img-overlay">
            <p id="text-on-two-car-half-page" class="card-text">more than one store</p>
          </div>
        </div>

      </div>
    </div>

    <!--Magazine-->
    <div class="container-fluid">
      <div class="row">

        <h2 class="col-12 text-center mt-3 mb-3">Magazine</h2>

        <div class="card mx-auto" id="cards-magazine">
          <img class="card-img-top" src="images/magazine section/hmgoepprod (2).jpg" alt="Card image">
          <div class="card-body">
            <p class="card-title text-center">Inside H&M</p>
            <h3 class="card-text text-center">A meadow of wildflowers</h3>
            <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
          </div>
        </div>

        <div class="card mx-auto" id="cards-magazine">
          <img class="card-img-top" src="images/magazine section/hmgoepprod (3).jpg" alt="Card image">
          <div class="card-body">
            <p class="card-title text-center">Inside H&M</p>
            <h3 class="card-text text-center">The Colour Story Collection</h3>
            <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
          </div>
        </div>

        <div class="card mx-auto" id="cards-magazine">
          <img class="card-img-top" src="images/magazine section/hmgoepprod (4).jpg" alt="Card image">
          <div class="card-body">
            <p class="card-title text-center">Inside H&M</p>
            <h3 class="card-text text-center">“Fashion is a means to social equality when everyone is given access to it”</h3>
            <a id="a-links-card-magazine" href="#" class="btn-link">See Profile ></a>
          </div>
        </div>

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

  </main>



  <!--Bootstrap4-->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>

稍微滚动后，粘性导航栏就不再固定了

After a little scroll, the sticky navbar just is not fixed anymore

css

fixed

sticky

bootstrap-4