Question

DEMO： http://codepen.io/anon/pen/ZLRoGE

我在jQuery / Bootstrap中使用粘性侧边栏的页面正在按照我想要的方式工作，但是当我滚动时，侧边栏不平滑且行为不正常。当用户滚动时，它会晃动。

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

HTML：

＆＃13;

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();
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我该怎么做才能在滚动期间停止这种抽搐效果？

Answer 1

据我所知，这是因为每次内容“滚动”时都必须重新绘制侧边栏的内容。可以把它想象成一个视频游戏的帧率很低。

您可以通过允许它正常滚动来修复此问题，并在您用来停止滚动的事件时使用javascript函数https://www.w3schools.com/jsref/met_document_getelementbyid.asp

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

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

粘滞侧边栏表现不稳定

1 个答案: