0

вот код набросал https://jsfiddle.net/u1snnqvt/

html:

<div class="clearfix">
  <div class="sidebar">
   <ul>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ul>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nulla quibusdam dolorem voluptatum doloremque perspiciatis sapiente sit, aliquid vitae. 
  </div>
</div>
<div class="footer">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore explicabo laboriosam voluptatum aut culpa minima voluptatem et neque quis tempora numquam perferendis corrupti facilis, deleniti mollitia id non aspernatur?
</div>

css:

.sidebar {
   position: fixed;
   top: 0;
   width: 30%;
   float: left;

}
.content {
   width: 70%;
   float:right;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

дано: есть сайдбар с position:fixed, справа от него контент, снизу всего этого дела футер. проблема в том, что если выставить высоту видимой зоны экрана меньше, чем высота сайдбара+футера, то при скролле произойдет следующее: футер будет двигаться наверх, наедет на сайдбар и перекроет его.

но нужно сделать так, чтобы футер останавливался(!) перед сайдбаром и не наезжал на него (и по-видимому дальше двигаться они должны уже оба, но как, если сайдбар fixed...). я уже и так и эдак перепробовал, но решение не дается. надеюсь на вашу помощь, заранее спасибо!

3
  • жесть, как вам такое в голову приходит) Измени блок на absolute и считай до 70% высоты от верха. Когда оно дойдет до отметки переставай изменять top значение у блока 15 июн 2016 в 12:49
  • @ВасилийБарбашев спасибо за скорый ответ! не совсем понял о чем вы. Если сделать position:absolute и с каждым события скрола изменять значение top, то перестать изменять top нужно будет в тот момент, когда верхняя граница футера дойдет до нижней границы сайдбара. но как это реализовать? если кто сможет быстро набросать, то буду очень благодарен!
    – Oner Ksor
    15 июн 2016 в 13:04
  • ну это же обычная математика :) Сейчас попробую 15 июн 2016 в 13:07

1 ответ 1

1

Например так:

var sidebar = document.getElementById('sidebar');
var sidebarH = sidebar.clientHeight;
var content = document.querySelector('.content').clientHeight;
var except = (content - sidebarH);
document.addEventListener('scroll', function(e) {
  var newScrollTop = e.target.scrollingElement.scrollTop;
  if (except >= newScrollTop) {
    sidebar.style.top = newScrollTop + 'px';
  }
});
.sidebar {
  position: absolute;
  top: 0;
  width: 30%;
  float: left;
}
.content {
  width: 70%;
  float: right;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<div class="clearfix">
  <div class="sidebar" id="sidebar">
    <ul>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
      <li>lorem ipsum</li>
    </ul>
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nulla quibusdam dolorem voluptatum doloremque perspiciatis sapiente sit, aliquid vitae. Vel magni, minus fugit tempora asperiores quibusdam ratione, labore quasi dolores ipsam, eaque quis
    adipisci quae velit hic cum provident nihil quos officiis rem nisi repudiandae minima! Eligendi ipsa aspernatur facere, dolorem nihil eius dolor excepturi porro nesciunt perspiciatis, dolores accusantium laudantium a asperiores voluptatum nemo iste,
    minus deserunt. Praesentium sunt, ea dicta. Sed, nihil voluptates ipsam quos pariatur, quidem nam, cum iure, provident maiores eius nobis libero commodi saepe excepturi molestias fuga nulla dolorum. Dolorum, nisi voluptatibus laudantium. Fuga ducimus
    maxime, nulla, expedita consectetur ea obcaecati quas. Vitae omnis fugit minus alias fuga dignissimos delectus sed nisi pariatur nemo sit dolorem distinctio laboriosam optio, doloremque soluta, deserunt aliquid dolorum hic ullam modi aperiam voluptatum
    unde! Deserunt necessitatibus doloribus esse nostrum autem voluptate obcaecati ducimus magnam id in dignissimos excepturi ab eos maiores natus praesentium laborum vel quibusdam, incidunt vero atque. Sint quis, labore, eum neque exercitationem nostrum
    quos deleniti. Harum sunt delectus vero laudantium natus amet aspernatur provident debitis itaque deleniti quas voluptates, similique nostrum impedit nihil commodi explicabo necessitatibus quo aperiam? Laudantium voluptates molestias nihil cupiditate
    ipsum, minus non dolorem totam dignissimos quos fuga magni, maxime, pariatur, harum voluptatem deserunt suscipit! Assumenda sunt aperiam fuga, ullam pariatur explicabo quidem ratione inventore obcaecati cumque, alias facere quaerat, ad! Hic repudiandae
    laudantium optio. Ad harum corrupti explicabo iure dolor doloribus aliquam perspiciatis laborum magni voluptatem cupiditate a, in, animi dignissimos assumenda expedita sapiente, autem ipsum dicta! Minus et eveniet velit sint inventore saepe ad, eum
    accusamus perferendis fuga modi dolorum in nihil qui voluptas minima vero atque libero ullam repudiandae omnis iusto reiciendis sapiente eius. Perspiciatis aut ratione ipsa minus animi, ea optio tempora maxime obcaecati eligendi veniam ullam ipsum
    perferendis necessitatibus illum facilis cum error. Officia necessitatibus ullam iure nostrum, eveniet eligendi corporis! Iure, debitis? Adipisci numquam placeat ipsa, autem deserunt, incidunt amet quaerat corporis fuga, et doloremque laboriosam nobis
    aperiam. Cupiditate sint amet quidem dolor, cum? Ut doloremque a hic numquam dignissimos repellat, odio quos repudiandae quaerat amet reprehenderit ullam nemo dolor, vero sed, earum totam recusandae modi voluptatum magnam. Ipsa nesciunt, officiis,
    velit hic voluptatibus et ratione ipsum! Quos quibusdam ipsam exercitationem excepturi, atque libero. Dolore laudantium corporis temporibus, commodi a, quis pariatur esse quibusdam quo! Ipsa id eveniet possimus minus quam harum iste praesentium sed
    culpa laudantium a, cupiditate. Quo eos, id eveniet a reprehenderit rerum natus asperiores maxime voluptatum alias expedita nulla, quas! Perspiciatis beatae modi est nemo provident accusantium sequi quisquam nam fuga quas ipsam pariatur consequuntur,
    vero porro aspernatur saepe suscipit. Quia laudantium magni hic voluptatum atque, possimus, est rem veniam eligendi voluptates praesentium consectetur. Est illum sapiente ipsam sint necessitatibus, obcaecati atque enim cumque optio iusto explicabo
    alias quo rem, reprehenderit incidunt repudiandae animi dolore doloribus earum, laudantium facilis autem. Temporibus, at provident sed inventore illum nemo impedit aspernatur animi optio quas repudiandae quibusdam velit illo fugit nihil maxime ipsum
    quod dolor, voluptas?
  </div>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore explicabo laboriosam voluptatum aut culpa minima voluptatem et neque quis tempora numquam perferendis corrupti facilis, deleniti mollitia id non aspernatur? Quae reiciendis nisi optio pariatur
  ex voluptatibus impedit facilis eligendi. Quibusdam soluta aperiam ut facere error eum repellat quas deleniti, perspiciatis, iusto numquam totam, sapiente nostrum harum. Amet ad nisi voluptatem possimus molestiae iure sapiente odit quos, praesentium
  quo pariatur temporibus inventore cupiditate ullam quis eligendi accusamus veritatis reiciendis. Eaque esse totam provident alias? Consequatur tempore, commodi eligendi cumque et natus ex provident odio quo amet modi deserunt perspiciatis quos placeat?</div>

Но тут ещё есть что улучшать

Пример на jsfiddle

3
  • чуть переделал и добавил в проект, все заработало! спасибо большое. единственная ошибка в том, что если sidebar целиком не умещается на экране, то он все равно начнет скроллиться только после того, когда его край соприкоснется с краем футера. но хотелось бы реализовать, чтобы в случае, когда высота видимой области меньше сайдбара, то он скролился до своего последнего пункта, после чего останавливался и продолжал скролиться уже только вместе с футером. вы представляете, как это можно сделать?
    – Oner Ksor
    15 июн 2016 в 14:26
  • можно сделать так: var curHeight = window.innerHeight мы узнаем высоту текущего окна браузера. сравниваем с sidebarHeight. если высота монитора меньше, то ставим position: relative до момента, пока не будет достигнут низ сайдбара. но опять как это реализовать я затрудняюсь..
    – Oner Ksor
    15 июн 2016 в 14:36
  • @OnerKsor ну это лишь часть, вы сам можете допилить) Моя задача натолкнуть на путь истинный) 15 июн 2016 в 14:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.