Блог

Я пытаюсь создать определенный div для автоматического перемещения при прокрутке просмотра вниз. Он отлично работает при прокрутке с помощью основного прокрутки браузера.

Тем не менее, я пытаюсь заставить его работать внутри контейнера div, который имеет атрибут overflow:auto, поэтому, как только просмотрщик прокручивает вниз в этом контейнере div, div с текстом «Этот элемент будет заблокирован» также должен перемещаться по нему.

Вот что я сделал до сих пор: jsfiddle

HTML:

 <div class="scrollTest">
  <div class="container">
  <div class="my-sticky-element">This item will be stucked</div>
  <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  
    </div>
</div>  
  

CSS:

 .my-sticky-element.stuck {
    position:fixed;
    top:0;
    box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
.my-sticky-element {
    background-color:grey;
    color: white;
    font-family: sans-serif;
    padding:5px 20px;
    width:200px;
    margin: auto;
}

.container{/*container for centering element*/
    background: blue;
    margin: 100px auto;
    width: 400px;
    height: 300px;
    overflow: auto;
}


body{min-height:1200px;}/*force scroll for demo*/

.scrollTest{
background: red;
margin-top: 350px;
margin-left:50px;
margin-right: 10px;
margin-bottom: 50px;
}
  

JS:

 //store the element
var $cache = $('.my-sticky-element');

//store the initial position of the element
var vTop = $cache.offset().top - parseFloat($cache.css('margin-top').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= vTop) {
      // if so, ad the fixed class
      $cache.addClass('stuck');
    } else {
      // otherwise remove it
      $cache.removeClass('stuck');
    }
  });
  

Вот чего я пытаюсь достичь, не используя position: sticky attrib, поскольку он не работает в IE

Попытка добиться этого

Надеюсь, я смог это четко объяснить, и я был бы очень признателен за любую помощь, которую я могу получить.

Примечание: мне также нужно, чтобы он работал в IE, поэтому использование position: sticky не вариант..