Положение элемента фиксировано ограничено

Question

Моя проблема :
Мой элемент (с position:fixed) перекрывает другой элемент (нижний колонтитул).

Need :
Я бы хотел, чтобы элемент с position:fixed оставался на своей позиции, когда прокрутка основного содержимого закончена.например:

Это IHM (не с кодом)

Пример : https://codepen.io/anon/pen/rKNLrW

Answer 1

Надеюсь, я понимаю ваш вопрос.

Goto Codepen

body {
  margin: 0;
  padding: 0;
}

.hardheight { 
  height:auto;
}

footer {
  height:200px;
  background:yellow;
}

.aside {
  color: #ffffff;
  height: 350px;
  padding: 15px;
  position: sticky;
  top: 0;
  width: 100px;
  background: green;
  padding: 5px;
  overflow: scroll;
}
.wrap {
  box-sizing: border-box;
  height: 800px;
  position: relative;
  width: 100%;
}




      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-2 wrap">
            <div class="aside">
              <p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
            </div>
           </div>
           <div class="col-sm-8 hardheight">
           <p>height content</p>
           <p>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur aliquet quam id dui posuere blandit. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Pellentesque in ipsum id orci porta dapibus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus.</p>
<p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Sed porttitor lectus nibh. Curabitur aliquet quam id dui posuere blandit. Cras ultricies ligula sed magna dictum porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
           </div>
           <div class="col-sm-2"><p>Cras ultricies ligula sed magna dictum porta. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat. Sed porttitor lectus nibh. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
           </div>  
        </div>
       </div>
        <footer>footer</footer>

Answer 2

Возможный способ сделать это - использовать position: sticky.Это заставит элемент оставаться на вершине, пока не будет достигнут конец .wrap.Вот реализация этого:

body {
  margin: 0;
  padding: 0;
}

footer {
  height: 200px;
  background: yellow;
  padding: 15px;
}

.wrap {
  box-sizing: border-box;
  height: 800px;
  position: relative;
  width: 100%;
  border: 1px solid red;
}

.aside {
  color: #ffffff;
  height: 50px;
  padding: 15px;
  position: sticky;
  top: 0;
  width: 100px;
  background: green;
}

<div class="row">
  <div class="col-md-2 wrap">
    <div class="aside">aside</div>
  </div>
  <div class="col-md-8">

  </div>
  <div class="col-md-2">

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