Создание параллакса Div

Question

У меня есть div, который я хочу оставить, чтобы навигатор и остальные просто прошли мимо него.

Вот моя текущая работа:

<div class="holder"> 
    <div id="carousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#carousel" data-slide-to="0" class="active"></li> 
      <li data-target="#carousel" data-slide-to="1"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 
      <div class="item active"> 
       <img src="http://placehold.it/1920x1080" class="img-responsive center-block"> 
      </div> 

      <div class="item"> 
       <img src="http://placehold.it/1920x1080 " class="img-responsive center-block"> 
      </div> 
     </div> 
    </div> 

    <div id="headerCaption"> 
     <img src="{{ asset('img/CaptionBg.png') }}" id="curve" class="img-responsive center-block"> 
    </div> 
</div> 

<div id="nav-wrapper"> 
    <nav class="navbar navbar-inverse navbar-static-top" id="navbar-main"> 
     <div class="container"> 

      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
       <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="#"><img src="{{ asset('img/logo.png') }}"></a> 
      </div> 

       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#"><i class="fa fa-shopping-cart"></i> Cart</a></li> 
        <li><a href="#"><i class="fa fa-user"></i> Sign Up/Login</a></li> 
       </ul> 

      <!-- Nav links --> 
      <div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
       <ul class="nav navbar-nav" id="nav-section"> 
        <li class="current active"> 
         <a href="#carousel">First Section</a> 
        </li> 

        <li> 
         <a href="#section-2">Second Section</a> 
        </li> 

        <li> 
         <a href="#section-3">Third Section</a> 
        </li> 

        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Dropdown link 1</a></li> 
          <li><a href="#">Dropdown link 2</a></li> 
          <li><a href="#">Dropdown link 3</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div><!-- End of navbar collapse --> 
     </div><!-- End of Container Fluid --> 
    </nav> 
</div> 

Я не знаю, может делать только то, что или это с помощью CSS, но мне нужно, чтобы это было остаться. И, если это возможно, можно использовать и другие div. Надеюсь, вы поняли, что я имею в виду.

Answer 1

Вот такой фрагмент. Показывает, как выполнить то, что вы просите.

Магия css attributeпозиция: исправлена;. Ну, ладно, не так много магии, но это работает. Установите свой div в фиксированное положение, используя атрибуты слева, справа, сверху, снизу, ширины и высоты, придавая ему фактическое положение и форму. Это так просто.

Просто посмотрите, как работают разные классы, просто измените класс на фиксированном div на один из четырех классов, которые я защищаю в качестве примера.

Надеется, что это помогает,

Tim

div.fixed-top-left { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.fixed-top-right { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.fixed-bottom-right { 
 
    position: fixed; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    border: 3px solid #73AD21; 
 
} 
 

 
div.fixed-bottom-left { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    border: 3px solid #73AD21; 
 
}

<div class="fixed-top-left holder"> 
 
    This is a fixed div 
 
</div> 
 

 
<div id="nav-wrapper"> 
 
    <nav class="navbar navbar-inverse navbar-static-top" id="navbar-main"> 
 
     <div class="container"> 
 

 
      <!-- Brand and toggle get grouped for better mobile display --> 
 
      <div class="navbar-header"> 
 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> 
 
       <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="#"><img src="{{ asset('img/logo.png') }}"></a> 
 
      </div> 
 

 
       <ul class="nav navbar-nav navbar-right"> 
 
        <li><a href="#"><i class="fa fa-shopping-cart"></i> Cart</a></li> 
 
        <li><a href="#"><i class="fa fa-user"></i> Sign Up/Login</a></li> 
 
       </ul> 
 

 
      <!-- Nav links --> 
 
      <div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
 
       <ul class="nav navbar-nav" id="nav-section"> 
 
        <li class="current active"> 
 
         <a href="#carousel">First Section</a> 
 
        </li> 
 

 
        <li> 
 
         <a href="#section-2">Second Section</a> 
 
        </li> 
 

 
        <li> 
 
         <a href="#section-3">Third Section</a> 
 
        </li> 
 

 
        <li class="dropdown"> 
 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a> 
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">Dropdown link 1</a></li> 
 
          <li><a href="#">Dropdown link 2</a></li> 
 
          <li><a href="#">Dropdown link 3</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div><!-- End of navbar collapse --> 
 
     </div><!-- End of Container Fluid --> 
 
    </nav> 
 
</div>