Question

这是我模板的标题区域部分。我想在顶部贴上菜单栏和徽标。我尝试了最多4天。但我不能。我使用sticky.js插件。但它不会发生。我的代码出了什么问题？我无法理解。我在标题部分使用视差。那就是问题所在。

.parallax-window {
  background: transparent;
}

.parallax_bg {
  z-index: 2;
  position: relative;
  color: #FFFFFF;
}

<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
  <div class="parallax_bg">
    <div class="top_area">
      <div class="header_area">
        <div class="container">
          <div class="row" id="navbar-example">
            <div class="col-md-2">
              <div class="logo">
                <a href="#"><img src="img/header_img/logo.png" alt=""></a>
              </div>
            </div>

            <div class="col-md-10">
              <div class="main_menu">

                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                </div>


                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#slider">Home</a></li>
                    <li><a href="#food_about">About</a></li>
                    <li><a href="#igredients">Igredients</a></li>
                    <li><a href="#food_menu">Menu</a></li>
                    <li><a href="#reviews">Reviews</a></li>
                    <li><a href="#reservations">Reservations</a></li>
                  </ul>
                </div>
                <div class="social_links">
                  <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header_text_area">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center">
              <div class="header_text">
                <h2>the right ingredients <br /> for the right food</h2>
                <a href="#" class="btn-filled">BOOK A TABLE</a>
                <a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

在标题类中尝试navbar-fixed-top。

Answer 2

这是你想要实现的目标吗？

.parallax-window {
  position: fixed;
  top: 0px;
  left: 0px;
}

<div class="top_area parallax-window" data-z-index="1" data-parallax="scroll" data-image-src="img/header_img/header_background.jpg">
  <div class="parallax_bg">
    <div class="top_area">
      <div class="header_area">
        <div class="container">
          <div class="row" id="navbar-example">
            <div class="col-md-2">
              <div class="logo">
                <a href="#"><img src="img/header_img/logo.png" alt=""></a>
              </div>
            </div>

            <div class="col-md-10">
              <div class="main_menu">

                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                </div>


                <div class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#slider">Home</a></li>
                    <li><a href="#food_about">About</a></li>
                    <li><a href="#igredients">Igredients</a></li>
                    <li><a href="#food_menu">Menu</a></li>
                    <li><a href="#reviews">Reviews</a></li>
                    <li><a href="#reservations">Reservations</a></li>
                  </ul>
                </div>
                <div class="social_links">
                  <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="header_text_area">
        <div class="container">
          <div class="row">
            <div class="col-md-12 text-center">
              <div class="header_text">
                <h2>the right ingredients <br /> for the right food</h2>
                <a href="#" class="btn-filled">BOOK A TABLE</a>
                <a href="#" class="btn-filled yellow-color-btn">SEE THE MENU</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何将标题区域粘贴在页面顶部？

2 个答案: