javascript - Scroll div next to other divs

I'm having a lay-out like this:

The left column should scroll down (till the next category) when scroling to bottom.

My HTML looks like this:

    <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>?&nbsp;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('.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('.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>

But I have no idea on how to make sure the left content is scrolling down when the other content on the right is not. I this doable with some javascript code?

Can you help me?

I'm having a lay-out like this:

The left column should scroll down (till the next category) when scroling to bottom.

My HTML looks like this:

    <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>?&nbsp;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>

But I have no idea on how to make sure the left content is scrolling down when the other content on the right is not. I this doable with some javascript code?

Can you help me?

Share Improve this question asked Mar 12, 2018 at 19:19 nielsv 6,81035 gold badges117 silver badges219 bronze badges

8 Could you create a code snippet, with css and html, that way, we could help easily. – Christian Commented Mar 20, 2018 at 22:01
Hi we need your css as well – oriadam Commented Mar 21, 2018 at 9:49
Am I stupid or he want to make left div fixed? – user8517929 Commented Mar 26, 2018 at 23:12

Add a comment |

5 Answers 5

Sorted by: Reset to default 10 +50

You can add a scroll to the products area like this

.product-container {
  height: 100vh; /* limit it to the size of your window */
  overflow: auto; /* add scroll when necessary */
}

See the example here: https://codepen.io/oriadam/pen/BrWqNw

Maybe you need sticky-kit here is link : http://leafo.net/sticky-kit/

You do not need Jquery to make a div scrollable. Simply put the following style for any container which has content you want to be able to scroll down. A scroll bar will appear at the side of the div. If you want help hiding the bar or anything else, let us know.

overflow-y: scroll;

It would be great if you could create a fiddle and share it with us, so that we can provide you a quick solution, ideally in cases where, any element is required to be "Fixed" it is positioned so by the following.

#element {
    position:fixed;
    top:0;
    left:0
   }

In that way it would be taken off the normal flow of the page, which can be set to

#remainingpage {
 height : 'n'px;
 overflow-y : scroll;
}

where 'n' is the measure of the height you want to specify.

Hope this helps, else it would be great if you could share a jsfiddle.

Yeah, that's completely doable if you used JavaScript scroll event!

Let's assume that we got this 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>

We will work on the left side only, here is the simple CSS:

.left {
  position: relative
}
.sticky {
  position: absolute
}

Let's write some 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";
});

If you don't like plain answers, I've done a working example on my CodePen.

Let me know if you need some explanations!

Good Luck!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Scroll div next to other divs - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)