0

I have a sidebar which is position:fixed; and overflow:auto; - this causes the scroll to happen within the fixed element.

Now when the sidebar is turned on, that element does not move, its just static on the page.

What i want to achieve: I would like to fix .super-image-thumb inside the scroll element, so when the scroll happens, the thumbnails at the top are fixed.

I have tried a javascript fix as well but its still not working. Any recommendations?

jQuery(function($) {
  function fixDiv() {
    var $cache = $('.super-image-thumb');
    if ($('.sliding-panel-content').scrollTop() > 100)
      $cache.css({
        'position': 'fixed',
        'top': '10px'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto'
      });
  }
  $('.sliding-panel-content').scroll(fixDiv);
  fixDiv();
});
.sliding-panel-content {
    z-index: 1204;
}
.middle-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.middle-content {
    position: fixed;
    left: 8%;
    top: auto;
    width: 85%;
    -webkit-transform: translateY(-115%);
    -ms-transform: translateY(-115%);
    transform: translateY(-115%);
    transition: all .25s linear;
}

.sliding-panel-content {
    overflow: auto;
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.sliding-panel-content.is-visible {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="js-menu sliding-panel-content middle-content is-visible">
  <span class="closeBtn sliding-panel-close"></span>
  <div class="slide-content">


    <div class="super-image-thumb">
      <div id="product-gallery-super">
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=1">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=2">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=3">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=4">
        </a>        
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=5">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=6">
        </a>
      </div>
    </div>

    <div class="main-image-container">
      <img class="main-image" src="http://placehold.it/500x2045">

      <button name="prev" id="super-prev">Prev</button>
      <button name="next" id="super-next">Next</button>
    </div>


  </div>
</div>
jagmitg
  • 4,236
  • 7
  • 25
  • 59
  • Sohphie Rhodes, are you opposed to moving the
    group outside (above) the
    ? This would result in a shorter scroll bar, is that an issue? Just asking to help folks consider solution requirements.
     – Cris Mooney Jul 27 '15 at 21:56
  • @CrisMooney Unfortunately not, the content is dynamically generated within the sliding panel content class. – jagmitg Jul 27 '15 at 21:58

3 Answers3

1

Fixed inside Fixed is always buggy. Let's just change top: http://jsfiddle.net/s31edgao/

function fixDiv() {
  $('.super-image-thumb').css({
      'top': $('.sliding-panel-content').scrollTop()+'px'
    });
}
$('.sliding-panel-content').scroll(fixDiv);
fixDiv();
Anarion
  • 1,048
  • 6
  • 16
1

Javascript for that will only make the things more complicated.

It is all about CSS, the position: fixed or absolute is always based on the first ancestor with position: relative, so you should play with it.

I would remove the jQuery code and add this CSS: 

.slide-content {
    position:relative;
}
.super-image-thumb {
    position:fixed;
    background: #FFF;
    top:0;
    width:100%;
    z-index: 2;
}

.main-image-container {
    position:absolute;
    top:85px;
    z-index: 0;
}

As in the jsfiddle

Francesco
  • 1,383
  • 7
  • 16
  • Hi, I like your answer, I also believe, that JS is not needed in this case, but is this working? I think, thumbs on top should be always fixed on top. And I tested your solution without success – areim Jul 27 '15 at 21:46
  • I also would like to have the down vote justified by the author – Francesco Jul 27 '15 at 21:50
  • @Francescoes. I downvoted - due to your CSS solution not making sense nor is it working on jsfiddle. – jagmitg Jul 27 '15 at 21:52
  • My confirmation: when I run the Fransesco es jsfiddle, the 6 images boxes at the top of the div continue to scroll with the scroll bar, which is what I read Sophie Rhodes as wanting to change. – Cris Mooney Jul 27 '15 at 21:52
  • 1
    Ok, my fault, I tested only on chrome and it works like a charm, Firefox doesn't like so much the `fixed` position, I trying to 'fix' it again – Francesco Jul 27 '15 at 21:56
  • 1
    Thank you @Francescoes. Appreciate it! been struggling with this issue for a while – jagmitg Jul 27 '15 at 21:59
  • 1
    And my solution didn't work because of the transition bug in Firefox. The solution was valid, and actually I guess also the explanation with positions, may someone should remove the downvote - BTW fiddle edited – Francesco Jul 27 '15 at 22:05
0

It looks like transitions and position: fixed does not work together in all browser, when you remove them, code works fine. Some solution for this you can find in css3 transform reverts position: fixed

I created snippet without transitions and also I removed JS part (I think is not needed), and propose CSS-only solution. It is not finished to the end, it needs some more aligments - but you can do it yourself - the way for solving your problem is clear, I think.

.sliding-panel-content {
    z-index: 1204;
}
.middle-content {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.middle-content {
    position: fixed;
    left: 8%;
    top: auto;
    width: 85%;
}

.sliding-panel-content {
    overflow: auto;
    top: 0;
    bottom: 0;
    height: 100%;
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.super-image-thumb {
    position: fixed;
    top: 10px;
}

.main-image-container {
    margin-top: 100px;   // should be same as thumb height
}

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="js-menu sliding-panel-content middle-content is-visible">
  <span class="closeBtn sliding-panel-close"></span>
  <div class="slide-content">


    <div class="super-image-thumb">
      <div id="product-gallery-super">
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=1">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=2">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=3">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=4">
        </a>        
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=5">
        </a>
        <a href="#" class="product-gallery">
          <img src="http://placehold.it/61x79?text=6">
        </a>
      </div>
    </div>

    <div class="main-image-container">
      <img class="main-image" src="http://placehold.it/500x2045">

      <button name="prev" id="super-prev">Prev</button>
      <button name="next" id="super-next">Next</button>
    </div>


  </div>
</div>
Community
  • 1
  • 1
areim
  • 3,371
  • 2
  • 23
  • 29