jquery.simple-scroll-follow

Sample »

HTML

<aside>Element to follow</aside>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.simple-scroll-follow.js"></script>

CSS

aside {
  position: absolute;
}

JavaScript

$('aside').simpleScrollFollow();

• position: absolute is required.

  追尾する要素にはposition: absoluteが必須です。

• It is not required, but for preventing a screen flickers on Google Chrome, the following is recommended.

  必須ではありませんが、Google Chromeで追尾要素がちらつく現象を防ぐため、下記の設定をお勧めします。

  CSS

  body {
    background: url(null) fixed;
  }
  

Sample »

HTML

<div>
  <article> ... </article>
  <aside> ... </aside>
</div>

JavaScript

$('aside').simpleScrollFollow({
  limit_elem: 'article'
});

If limit_elem is empty, it will be set to 'window'.

limit_elemを指定子ない場合は、下限はウィンドウの下端となります。

Sample »

CSS

/* for PC */
@media screen and (min-width:992px) {
  aside {
    width: 300px;
    position: absolute;
    top: 0px;
    left: 500px;
  }
}

/* for Smart Phone */
@media screen and (max-width:991px) {
  aside {
    width: 600px;
    position: static;
    top: auto;
    left: auto;
  }
}

JavaScript

$('aside').simpleScrollFollow({
  min_width: 992 // number. do not add 'px'.
});

Sample »

JavaScript

$('#enabled').simpleScrollFollow({
  enabled: true
});
$('#disabled').simpleScrollFollow({
  enabled: false
});

Sample »

JavaScript

var arr_instance = $('aside').simpleScrollFollow({
  instance: true
});

$(arr_instance).each(function() {
  var self = this;
  $('aside #toggle_scroll').click(function() {
    if ($(this).text() == 'click to disable scroll') {
      self.setEnabled(false);
      $(this).text('click to enable scroll');
    } else {
      self.setEnabled(true);
      $(this).text('click to disable scroll');
    }
  });
});

Please read JSDoc what kind of public method you can use.

利用可能な公開メソッドについてはJSDocをご覧ください。

JSDoc »

Sample »

In addition, the plugin is used in this page.

なお、このページでもこのプラグインを利用しています。