How to make a product comparison scroll like Eldorado?

Question

Good day! Is there a ready-made solution to make a product comparison scroll like on the Eldorado website? Here is an example link .

Ie, there is a block with a picture of goods, under it a scroll that scrolls both a block with pictures and a block with characteristics, when scrolling through the page, the block is fixed on top. Maybe someone knows how to implement this?

Qwertiy ♦ Qwertiy 76.6k 17 golden marks 74 silver marks 203 bronze marks · Accepted Answer · 2016-11-25T08:42:24

I'm pretty sure that you can only find it via css, but it's easier to do this:

var scrollSource = document.getElementById("si"); var scrollDest = document.getElementById("sd"); scrollSource.addEventListener('scroll', function () { scrollDest.scrollLeft = scrollSource.scrollLeft; })

 #si { overflow: auto; } #sd { overflow: hidden; } /* Внимание! Надо обеспечить одинаковую ширину их контента! */

 <section id=si> 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 </section> <section id=sd> <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div> <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div> <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div> <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div> <div>12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div> </section>

Answer 2 · 2016-11-25T08:27:48

Well, something like this:

 $(function() { var elem = '.header', to_elem = '.contant', epos = $(elem).offset().top; $(window).scroll(function() { if($(window).scrollTop() >= epos){ $(elem).css({position: 'fixed', top: 0}); }else{ $(elem).css({position: 'initial'}); }; }); $(elem).scroll(function() { $(to_elem).scrollLeft($(elem).scrollLeft()) }); });

 .main {height: 4000px; padding-top: 50px;} .header {width:250px; height: 100px; overflow-x: auto; overflow-y: hidden} .header .list {width: 660px;} .header .list .item {width: 100px; height: 100px; background-color:red; margin: 0 5px; float: left} .contant {width:250px; height: 500px; overflow: hidden;} .contant .list {width: 660px;} .contant .list .item {width: 100px; height: 500px; background-color:red; margin: 0 5px; float: left}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- HTML --> <div class="main"> <div class="header"> <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> <div class="contant"> <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div> </div>

there is still left / right you can move the scroll on a fixed block, and the main table will scroll :)
But here is another question, how to implement scrolling of two objects with one scrolling, by the link you can see that they are two independent blocks, and they have one scrolling

How to make a product comparison scroll like Eldorado?

2 answers 2

More articles: