Bootstrap3实现非顶部行元素sticky吸顶效果的问题求助

首先排查position:sticky失效原因 #

• 必须给sticky元素设置top属性，缺少该属性sticky不会生效
• 该元素的所有父级元素不能设置overflow: hidden/overflow: auto/overflow: scroll，任意父级设置了该属性都会导致sticky失效
• Bootstrap3本身没有内置吸顶相关组件，该特性是Bootstrap4及以上版本才加入的

方案1：纯CSS实现（推荐，性能最好） #

给目标元素添加如下样式即可：

#shop-cart-count-mobile {
  position: -webkit-sticky; /* 兼容Safari浏览器 */
  position: sticky;
  top: 0; /* 滚动到元素顶部贴住视口顶部时触发吸顶 */
  z-index: 999; /* 保证吸顶后不会被其他元素遮挡 */
}

方案2：原生JS实现（兼容性最好，不受父元素样式限制） #

如果因为页面结构限制无法使用sticky，可以用如下JS代码实现，兼容所有主流浏览器：

const stickyCart = document.getElementById('shop-cart-count-mobile')
const cartOffsetTop = stickyCart.offsetTop
// 提前获取元素高度，避免滚动时重复计算
const cartHeight = stickyCart.offsetHeight

window.addEventListener('scroll', function() {
  if (window.pageYOffset >= cartOffsetTop) {
    stickyCart.style.position = 'fixed'
    stickyCart.style.top = '0'
    stickyCart.style.width = '100%'
    // 给body加内边距，避免元素脱离文档流导致页面突然跳动
    document.body.style.paddingTop = cartHeight + 'px'
  } else {
    stickyCart.style.position = 'static'
    document.body.style.paddingTop = '0'
  }
})

方案3：jQuery实现（适合项目已经引入jQuery的场景） #

因为Bootstrap3本身依赖jQuery，所以可以直接用如下简化写法：

const $stickyCart = $('#shop-cart-count-mobile')
const cartOffsetTop = $stickyCart.offset().top
const cartHeight = $stickyCart.outerHeight()

$(window).scroll(function() {
  if ($(this).scrollTop() >= cartOffsetTop) {
    $stickyCart.css({
      'position': 'fixed',
      'top': 0,
      'width': '100%',
      'z-index': 999
    })
    $('body').css('padding-top', cartHeight + 'px')
  } else {
    $stickyCart.css('position', 'static')
    $('body').css('padding-top', 0)
  }
})

内容的提问来源于stack exchange，提问作者Chud37