jQuery

【jQuery】スティッキーサイドバーjQueryプラグインstickyMojo

May 14, 2018
STICKYMOJO.JS

stickyMojoはスティッキーサイドバーjQueryプラグイン。軽量で、速く、柔軟性があり、Firefox、Chrome、Safari、IE8 +と互換性があります。

Getting Started: Get the Script

ファイルをインクルード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script src="js/stickyMojo.js"></script>

Setting up the HTML

最低限必要なHTML構造

<div id="wrapper">
 
  <div id="sidebar">
    <p>sidebar</p>
  </div>
 
  <div id="main">
    <p>main</p>
  </div>
 
  <div id="footer">
    Footer
  </div>
 
</div>

Configuring your CSS

必要に応じて変更します。

body {
  margin:0;
  padding:0;
}
#main {
  width:750px;
  height: 750px; /*can be anything, just should make sure it is taller than the sidebar*/
  padding: 25px;
  float: left;
  background-color: #fafafa;
}
#sidebar {
  width: 120px;
  background-color: #ccc;
  min-height: 200px;
  margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
  padding: 15px 10px;
  float: left; /* float right for a right aligned sidebar */
}
#footer {
  width: 940px;
  clear:both;
  background-color: #ccc;
  height: 500px;
  margin-top: 100px;
}
#wrapper {
  width: 940px; /* MUST HAVE WIDTH SET, should be the sidebar width + main width */
  margin-left: auto;
  margin-right: auto;
}

Javascript Initiation

サイドバーを初期化

<script>
  $(document).ready(function(){
    $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});
  });
</script>

MIT