У меня есть такая схема:
При прокрутке вниз левая колонка должна прокручиваться вниз (до следующей категории).
Мой HTML выглядит так:
<div class="wrapper gray-bg">
<div class="centered">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-4 information group">
<h1>Glas</h1>
<hr>
<p class="info">
</p>
<p>Wil je een maximale <strong>lichtinval</strong> en maximale <strong>isolatie</strong>, maar hou je ook van een <strong>strak design</strong>? Kies dan voor onze vlakke lichtkoepels met dubbelwandig of 3-dubbel glas. Ze zien er niet alleen geweldig uit, maar scoren op alle vlakken ongelooflijk goed.</p>
<p></p>
<div class="buttons">
<a href="" class="button">bekijk referenties</a>
<a href="/nl/professional/contact" class="button gray">Vraag offerte</a>
</div>
</div>
<div class="col col-xs-12 col-sm-12 col-md-7 col-lg-8 product-container flex-row">
<div class="col-xs-12 col-md-12 col-lg-6 flex-container">
<div class="product">
<div class="image" style="background-image: url('https://exmple.com/media/cache/product_thumbnail/uploads/fa5256f2004f96761a87427be6db1e8d2e2fd983.jpeg');">
<span>new</span>
</div>
<h1>exmple iWindow2 ™</h1>
<hr>
<h2>Superisolerende lichtkoepel met 2-wandig glas</h2>
<ul class="findplace">
<li>Scoort erg goed qua isolatie: Ut-waarde 1,0 W/m²K</li>
<li>Strak, eigentijds design</li>
<li>Doorvalveilig</li>
<li>Slanke omkadering, slechts 28 mm</li>
<li>Vaste of opengaande uitvoering</li>
</ul>
<div class="bottom-buttons">
<a href="/nl/professional/product/exmple-iwindow2#prijs" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-euro"></i>
<p>Prijs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow2#technische_specs" class="col col-xs-3 col-md-6 col-lg-3 custom">
<i class="fa fa-drafting-compass"></i>
<p>Technische specs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow2#brochures" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-file-text"></i>
<p>Brochures</p>
</a>
<a href="/nl/professional/product/exmple-iwindow2#montage" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-map"></i>
<p>Montage</p>
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-12 col-lg-6 flex-container">
<div class="product">
<div class="image" style="background-image: url('https://exmple.com/media/cache/product_thumbnail/uploads/e2b4180f8d9109c79350817d46e9c184080e8353.jpeg');">
<span>new</span>
</div>
<h1>exmple iWindow3 ™</h1>
<hr>
<h2>Superisolerende lichtkoepel met 3-wandig glas</h2>
<ul class="findplace">
<li>Scoort erg goed qua isolatie: Ut-waarde 0,5 W/m²K</li>
<li>Strak, eigentijds design</li>
<li>Doorvalveilig</li>
<li>Slanke omkadering, slechts 55mm</li>
<li>Vaste of opengaande uitvoering</li>
</ul>
<div class="bottom-buttons">
<a href="/nl/professional/product/exmple-iwindow3#prijs" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-euro"></i>
<p>Prijs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow3#technische_specs" class="col col-xs-3 col-md-6 col-lg-3 custom">
<i class="fa fa-drafting-compass"></i>
<p>Technische specs</p>
</a>
<a href="/nl/professional/product/exmple-iwindow3#brochures" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-file-text"></i>
<p>Brochures</p>
</a>
<a href="/nl/professional/product/exmple-iwindow3#montage" class="col col-xs-3 col-md-6 col-lg-3">
<i class="fa fa-map"></i>
<p>Montage</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Но я понятия не имею, как убедиться, что левый контент прокручивается, когда другого контента справа нет. Я это выполнил с некоторым кодом javascript?
Вы можете мне помочь?
Вы можете добавить свиток к области продуктов, подобной этой
.product-container {
height: 100vh; /* limit it to the size of your window */
overflow: auto; /* add scroll when necessary */
}
См. Пример здесь: https://codepen.io/oriadam/pen/BrWqNw
Может быть, вам нужен липкий комплект, вот ссылка: http://leafo.net/sticky-kit/
Вам не нужно Jquery, чтобы сделать прокручиваемый div. Просто введите следующий стиль для любого контейнера, у которого есть контент, который вы хотите прокрутить вниз. На боковой панели div появится полоса прокрутки. Если вы хотите, чтобы помощь скрывала бар или что-то еще, сообщите нам об этом.
overflow-y: scroll;
Было бы здорово, если бы вы могли создать скрипку и поделиться ею с нами, чтобы мы могли предоставить вам быстрое решение, в идеале в тех случаях, когда любой элемент должен быть "Фиксирован", он позиционируется следующим образом.
#element {
position:fixed;
top:0;
left:0
}
Таким образом, он будет снят с обычного потока страницы, который может быть установлен на
#remainingpage {
height : 'n'px;
overflow-y : scroll;
}
где 'n' - мера высоты, которую вы хотите указать.
Надеюсь, это поможет, иначе было бы здорово, если бы вы могли поделиться jsfiddle.
Да, это вполне выполнимо, если вы использовали событие scroll JavaScript!
Предположим, что мы получили этот HTML:
<div class="left col-md-3">
<article class="sticky">
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s</p>
</article>
</div>
<div class="right col-md-9 text-center">
<!-- Right side Content Here -->
</div>
Мы будем работать только с left стороны, вот простой CSS:
.left {
position: relative
}
.sticky {
position: absolute
}
Пусть написано JavaScript:
// Select our 'sticky' div
const stickyDiv = document.querySelector(".sticky");
/*
* Detect the 'scroll' event
* Set the PageXOffset ( The space that we scrolled top )
* as the 'top' CSS Property value
* This would force the 'sticky' div to stay on top!
*/
window.addEventListener("scroll", function() {
stickyDiv.style.top = window.pageYOffset + "px";
});
Если вам не нравятся простые ответы, я сделал рабочий пример на моем CodePen.
Дайте мне знать, если вам нужны объяснения!
Удачи!