[英]Scroll div next to other divs
我有這樣的布局:
滾動到底部時,左列應向下滾動(直到下一個類別)。
我的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就會很棒。
是的,如果您使用JavaScript scroll
事件,這是完全可行的!
我們假設我們得到了這個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's 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上做了一個有效的例子。
如果您需要一些解釋,請告訴我!
祝好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.