滚动时修复/解锁Div

Question

目前正在处理有三行内容的部分。图像，标题和一些文本。当该部分到达窗口的顶部时，还有一个额外的div，它从窗口顶部固定50px，并在用户滚动时滚动。

当div从截面的底部点击30px时，其位置将切换为绝对值。

这似乎主要是js问题，所以我将把JS留在这里进行审核。理想情况下，我想摆脱使用固定数字，就像我现在正在使用的那样，如果有人对如何摆脱这个或者像我提到的那样有任何建议，那么在距离该部分底部30px时将div设置为绝对值，无论高度如何。

    var stickyTop = $('.scroller_anchor').offset().top;
    $(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= stickyTop) {
            $('.depositionx-contact').addClass('scrolling');
            $('.map-anchor').addClass('scrolling');
            if ($(window).scrollTop() > 2990) { 
                $('.depositionx-contact').addClass('unstick');
            } else {
                $('.depositionx-contact').removeClass('unstick');
            }
        } else {
            $('.depositionx-contact').removeClass('scrolling');
            $('.map-anchor').removeClass('scrolling');
        }
    }); 

为了一个更直观的例子，我附了一支笔。

https://codepen.io/crawbuck/pen/wpeRWW

任何输入都将不胜感激。

Answer 1

抱歉延误。我把一个工作样本拍了一下。您可以看到fiddle here。

它的要点是仅当元素落在父容器偏移到父容器高度的范围内时才滚动元素 - 元素的高度。

function SemiFixElement($container, $element) {
  $container = $($container);
  $container.width($container.width());
  $container.height($container.height());
  $container.css('position', 'absolute');
  $container.css('left', '0');
  $element = $($element);
  $element.css('position', 'relative');
  $(window).on('scroll', function(ev) {
    let top = -$container[0].getBoundingClientRect().top;
    top = Math.max(0, top);
    top = Math.min(top, $container.height() - $element.height());
    $element.css('top', top);
  });
}

SemiFixElement('.semi-fixed-container', '.semi-fixed');

.column-layout {
  display: flex;
  justify-content: flex-end;
}

.column-layout > .semi-fixed-container {
  background: LightBlue;
  width: 100px;
}

.column-layout > div {
  background: LightGreen;
  max-width: calc(100% - 100px);
}

ul {
  list-style-type: none;
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
  mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
  iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
  Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
  lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
  eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
  condimentum dapibus augue et tristique.
</p>
<p>
  Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
  ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
  mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
  Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
  est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
  Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
  <div class="column-layout">
    <div class="semi-fixed-container">
      <div class="semi-fixed">
        <ul>
          <li><a>Link 1</a></li>
          <li><a>Link 2</a></li>
          <li><a>Link 3</a></li>
          <li><a>Link 4</a></li>
          <li><a>Link 5</a></li>
        </ul>
      </div>
    </div>
    <div>
      <p>
        Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
        velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
        in, rutrum enim. Aenean ut est sed leo dapibus auctor.
      </p>
      <p>
        Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
        volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
        Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
      </p>
      <p>
        Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
        libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
        Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
      </p>
      <p>
        Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
        metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
        In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
      </p>
      <p>
        Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
        eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
        nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
      </p>
      <p>
        Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
        bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
        pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
      </p>

    </div>
  </div>
</div>
<p>
  Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
  lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
  eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
  condimentum dapibus augue et tristique.
</p>
<p>
  Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
  ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
  mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
  Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
  lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
  eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
  condimentum dapibus augue et tristique.
</p>
<p>
  Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
  ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
  mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>