Question

我正在使用Bootstrap 4类＆＃34; sticky-top＆＃34; （对于位置：粘性）在顶部粘贴元素，你猜对了。

有没有办法添加额外的类，如＆＃34; is-sticky-top＆＃34;到DIV的时候它会卡住＆＃34;？

我发现了这一点，但我无法根据自己的需要进行调整：https://developers.google.com/web/updates/2017/09/sticky-headers

编辑 - 澄清我的需求：

班级＆＃34;粘贴式＆＃34;添加位置：粘贴到元素。在我的情况下，如果DIV的位置在顶部是粘性的，我想为DIV添加一个额外的类。例如，为元素添加一个阴影，但只有在它被粘贴的情况下才会添加阴影。在上面。所以我只在这种情况下需要B级

Answer 1

嘿，我在此发表了一篇中型文章。可能适用或可能不适用于您的特定用例，但我建议您花一些时间进行检查。

https://medium.com/@parkjoon94/activatable-drop-shadow-on-sticky-elements-d0c12f1ebfdf

因此，该技术的基本要点是使用一个元素遮盖阴影，当用户滚动时，遮盖向上滚动以“发现”其后面的阴影。

这是一个有效的JSFiddle，正在运行：https://jsfiddle.net/parkjoon/tp1e9yad/

.shadow {
  position: sticky;
  top: 200px;
  width: 297px;
  box-shadow: 0px 0.5px 0.5px 1.5px rgba(0,0,0,0.75);
}

.cover {
  position: absolute;
  background: white;
  width: 100%;
  height: 3px;
}

Answer 2

目前，检查的唯一方法是在滚动时计算div位置。

＆＃13;

$('#wrapper').scroll(function() {
	var wrapperTop = $(this).offset().top;
	var headerTop = $('#header').offset().top;
	if (wrapperTop < headerTop)
  	$('#header').css('background','grey');
  else
  	$('#header').css('background','red');
});

＆＃13;

#wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow-y: scroll;
}

#header {
  height: 50px;
  background: grey;
  top: -1px;
  position: sticky;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div id="header">HEADER TEXT</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

＆＃13;

Answer 3

我想出了一个很好的解决方案，可以与任何顶部/底部偏移量配合使用。只要给它寻找哪些元素，它就可以确定是否已达到粘性阈值。

滚动/调整大小事件可能会过于频繁，因此如果您遇到问题，则只需使用下面带有注释的版本并加上反跳即可减少检查频率。

请注意，这假设您的CSS顶部/底部值将以像素为单位，其他单位可能无法在此处使用。

$(() => {
  const stuckClass = 'is-stuck';
  const $stickyTopElements = $('.sticky-top');
  const $stickyBottomElements = $('.sticky-bottom');

  const determineSticky = () => {
    $stickyTopElements.each((i, el) => {
      const $el = $(el);
      const stickPoint = parseInt($el.css('top'), 10);
      const currTop = el.getBoundingClientRect().top;
      const isStuck = currTop <= stickPoint;
      $el.toggleClass(stuckClass, isStuck);
    });

    $stickyBottomElements.each((i, el) => {
      const $el = $(el);
      const stickPoint = parseInt($el.css('bottom'), 10);
      const currBottom = el.getBoundingClientRect().bottom;
      const isStuck = currBottom + stickPoint >= window.innerHeight;
      $el.toggleClass(stuckClass, isStuck);
    });
  };

  //run immediately
  determineSticky();

  //Run when the browser is resized or scrolled
  //Uncomment below to run less frequently with a debounce
  //let debounce = null;
  $(window).on('resize scroll', () => {
    //clearTimeout(debounce);
    //debounce = setTimeout(determineSticky, 100);

    determineSticky();
  });

});

.sticky-top,
.sticky-bottom {
  position: sticky;
  z-index: 1000;
  padding: 10px;
  border: 1px solid #CCC;
  background-color: #FFF;
  transition: all 300ms;
}

.sticky-top {
  top: 40px;
}

.sticky-bottom {
  bottom: 40px;
}

.is-stuck {
  background: blue;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>some text</p>
<p>some text</p>
<p>some text</p>
<div class="sticky-top">
  Sticky to the top!
</div>

<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<div class="sticky-bottom">
  Sticky to the bottom!
</div>

<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>

检查DIV是否粘稠

3 个答案: