javascript - 粘性侧边栏行为异常

Question

演示: http://codepen.io/anon/pen/ZLRoGE

我的带有用 jQuery/Bootstrap 编写的粘性侧边栏的页面完全按照我想要的方式工作，但是，当我滚动时，侧边栏不平滑并且行为不稳定。当用户滚动时它会抽搐。

该功能在其他方面正是我想要的方式，当侧边栏的内容到达其底部时就会停止。

HTML:

jQuery(document).ready(function() {
  jQuery.fn.stickyTopBottom = function() {
    var options = {
      container: jQuery('#stickymain'),
      top_offset: 0,
      bottom_offset: 0
    };
    console.log(options);
    let jQueryel = jQuery(this)

    let container_top = options.container.offset().top
    let element_top = jQueryel.offset().top

    let viewport_height = jQuery(window).height()
    jQuery(window).on('resize', function() {
      viewport_height = jQuery(window).height()
    });
    let current_translate = 0
    let last_viewport_top = document.documentElement.scrollTop || document.body.scrollTop
    jQuery(window).scroll(function() {
      var viewport_top = document.documentElement.scrollTop || document.body.scrollTop
      let viewport_bottom = viewport_top + viewport_height
      let effective_viewport_top = viewport_top + options.top_offset
      let effective_viewport_bottom = viewport_bottom - options.bottom_offset


      let element_height = jQueryel.height()

      let is_scrolling_up = viewport_top < last_viewport_top
      let element_fits_in_viewport = element_height < viewport_height

      let new_translation = null
      if (is_scrolling_up) {
        if (effective_viewport_top < container_top)
          new_translation = 0
        else if (effective_viewport_top < element_top + current_translate)
          new_translation = effective_viewport_top - element_top
      } else if (element_fits_in_viewport) {
        if (effective_viewport_top > element_top + current_translate)
          new_translation = effective_viewport_top - element_top

      } else {
        let container_bottom = container_top + options.container.height()
        if (effective_viewport_bottom > container_bottom)
          new_translation = container_bottom - (element_top + element_height)
        else if (effective_viewport_bottom > element_top + element_height + current_translate)
          new_translation = effective_viewport_bottom - (element_top + element_height)
      }
      if (new_translation != null) {
        current_translate = new_translation;
        console.log('i am here at css');

        jQueryel.css('transform', ('translate(0, ' + current_translate + 'px)'));
      }
      last_viewport_top = viewport_top
    });
  }
  jQuery('#stickyside').stickyTopBottom();
});

#header {
  height: 100px;
  background: red;
  margin-bottom: 15px;
}
.red {
  color: red;
}
.col-xs-8 {
  background: lightgray;
}
.main {
  min-height: 1200px;
}
#stickyside {
  position: absolute;
}
#footer {
  margin-top: 15px;
  height: 100px;
  background: orange;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div class="container" id="stickymain">
  <div class="row">
    <div class="col-xs-8">
      <div class="main">
        <p>This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the
          main content.This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content.
          This is the main content.</p>
        <p>This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the
          main content.This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content. This is the main content.
          This is the main content.</p>
      </div>
    </div>
    <div class="col-xs-4">
      <div id="stickyside">
        <p class="red">See how this sidebar flickers as you scroll? I want to fix this.</p>
        <p>This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling.This
          is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling. This is the end where it stops scrolling.
          This is the end where it stops scrolling. This is the end where it stops scrolling.</p>
      </div>
    </div>
  </div>
</div>
<div id="footer"></div>

如何在滚动过程中停止这种抖动效果？

Answer 1

据我所知，这是因为每次内容“滚动”时都必须重新绘制侧边栏的内容。可以将其视为视频游戏中较差的帧速率。

您可以通过允许其正常滚动来解决此问题，并且在您用来阻止其滚动的事件中，使用 javascript 函数 https://www.w3schools.com/jsref/met_document_getelementbyid.asp

document.getElementById(/*Element id*/).style

将属性样式从绝对更改为固定。