侧栏固定面板，带固定内容块

Question

我的侧边栏是位置：固定; 和溢出：自动; - 这会导致滚动发生在固定元素中。

现在，当侧边栏打开时，该元素不会移动，它在页面上只是静态的。

我想要实现的目标：我想在scroll元素中修复 .super-image-thumb ，所以当滚动发生时，顶部的缩略图是固定的。

我也尝试了一个javascript修复，但它仍然无法正常工作。有什么建议吗？

＆＃13;

＆＃13;

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();
});

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

固定内部固定总是有问题。我们只需更改insert into table(n_people_in_room) select count(people_id) from table group by room ：http://jsfiddle.net/s31edgao/

top

Answer 2

Javascript for that只会让事情变得更复杂。

所有关于CSS的问题，position: fixed或absolute总是基于position: relative的第一个祖先，所以你应该玩它。

我会删除jQuery代码并添加这个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;
}

与jsfiddle

一样

Answer 3

看起来transitions和position: fixed在所有浏览器中无法协同工作，当您删除它们时，代码运行正常。您可以在css3 transform reverts position: fixed

中找到一些解决方案

我创建了没有过渡的片段，并且我删除了JS部分（我认为不需要），并提出仅使用CSS的解决方案。它还没有完成，它需要更多的对象 - 但你可以自己做 - 我认为解决问题的方法很明确。

.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>