Sticky Scroller phần 1 (ok)

https://github.com/guoyunhe/sticky-scroller

6KB
jQuery-Plugin-For-Fixed-Position-Elements-lockfixed.zip
archive
52KB
sticky-scroller-master.zip
archive
1KB
jquery.lockfixed.min.js

Ví dụ 1:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Demo for LockFixed</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="jquery.lockfixed.min.js"></script>
  <style>
    body {
    margin: 0;
    }
    h1 {
    margin: 0 0 0 10px;
    line-height: 2em;
    }
    div {
    box-sizing: border-box;
    }
    #menu {
      position: fixed;
      height: 60px;
      width: 100%;
      top: 0;
      left: 0;
      border-top: 5px solid #a1cb2f;
      background: #fff;
      -moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      -webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
      z-index: 999999;
      line-height: 60px;
    }
    .w {
      width: 900px;
      margin: 0 auto;
      margin-bottom: 40px;
    }
    #head {
      width: 100%; border-bottom: 1px solid #CED5E5;
    }
    #main {
      position: relative;
    }
    #sidebar {
      height: 200px; 
      width: 180px; 
      position: absolute; 
      left: 10px; 
      top: 0;
    }
    #logo {
      margin: 5px; 
      text-align: center; 
      font-size: 1.2em;
    }
    .menu {
      border: 1px solid #CED5E5; 
      margin:5px; 
      padding: 2px; 
    }
    .promo {
      border: 1px solid #CED5E5; 
      margin:5px; 
      padding: 5px; 
    }
    #content {
      min-height: 1500px; 
      margin-left: 200px; 
      top: 0; 
      border-left: 1px solid #CED5E5; 
      width: 600px; 
      padding: 5px;
    }
    #footer {
      height:500px; 
      border-top: 1px solid #CED5E5; 
      padding:10px
    }
    #container {
      margin-top:100px;
    }
    </style>
</head>

<body>
  <div id="menu">
    <div class="w">
      <a href="#">Download</a> - <a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></div>
  </div>
  <div id="container">
    <div id="head">
      <h1>Header LockFixed</h1>
    </div>
    <div id="main">
      <div id="sidebar">
        <div id="logo">Demo</div>
        <div class="menu">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, ipsum, porro, voluptas sunt consequuntur pariatur minus nemo, explicabo modi vero reprehenderit soluta aperiam mollitia dignissimos recusandae dicta atque. Quas nobis odit voluptas autem at fugiat repellendus consequuntur accusamus praesentium, amet pariatur minus alias ipsum necessitatibus omnis nisi magni iure? Ducimus, reprehenderit aperiam fugiat laboriosam tempora consequatur neque tempore, adipisci. Officiis debitis id adipisci sint sapiente quisquam iusto fugit ducimus repellendus ad nemo explicabo amet cumque recusandae voluptatibus nam dolore doloribus aut similique fuga, dignissimos officia deserunt. Sed harum soluta quam non quibusdam eius eum commodi error cumque ducimus.</div>
      </div>
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis consectetur convallis. Proin consequat dignissim risus, at tempus lorem tempus vel. Aliquam ut ante non lacus ultricies pellentesque lobortis et dui. Aenean vitae arcu at felis venenatis mollis in et dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat viverra magna vitae placerat. Maecenas sagittis diam ac erat egestas ac commodo leo consequat.</p>
        <p>Nullam vehicula, nulla vel egestas congue, felis quam imperdiet felis, a congue odio dolor in est. Pellentesque tristique euismod elit, ut rhoncus enim volutpat non. Praesent id tortor quis ante pharetra dignissim. Integer mauris nisi, feugiat a suscipit nec, suscipit sit amet dolor. Nulla in lectus nulla. Vestibulum id suscipit dolor. Aliquam ornare, massa id consectetur scelerisque, urna magna viverra enim, hendrerit placerat est risus eget tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non velit a nibh venenatis pulvinar. Nullam eleifend fringilla sem, nec pellentesque erat blandit non. Donec lobortis augue sed sem faucibus suscipit. In in odio diam.</p>
        <p>Sed sapien sapien, faucibus eu consectetur id, laoreet quis nisi. Aenean consequat justo in lectus consequat ac placerat nisl accumsan. Cras et ligula nulla, et gravida neque. Proin sagittis placerat gravida. Nam id tellus vitae dolor egestas malesuada. Sed vel purus vitae enim faucibus porttitor. Mauris congue iaculis urna vitae tempor.</p>
        <p>Nullam dictum libero sodales leo luctus sit amet rutrum mi imperdiet. Mauris ac bibendum dolor. Nunc non nunc non enim cursus hendrerit ut sed nunc. Donec a odio nec mi interdum facilisis. Duis non leo mi, et fringilla tortor. Sed rutrum, sem sit amet volutpat vehicula, lorem risus vestibulum arcu, id dignissim turpis eros eget felis. Phasellus magna odio, consectetur eget accumsan eu, dignissim id magna. Aliquam vulputate leo eget enim egestas facilisis. Cras vulputate tellus eget urna scelerisque quis convallis libero hendrerit.</p>
        <p>Vestibulum et quam mauris. Suspendisse sodales neque eu velit euismod et luctus felis consectetur. Maecenas sollicitudin scelerisque vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dapibus volutpat lobortis. Praesent fringilla lectus a lectus pulvinar sed lacinia nibh venenatis. Donec convallis lectus id risus accumsan faucibus. Nam et lorem vel justo pulvinar laoreet. Morbi quis tortor nec purus aliquam elementum. Cras eget nunc nisi, vitae interdum massa.</p>
        <p>Aliquam erat volutpat. Etiam at magna erat, non dictum lorem. Pellentesque feugiat bibendum accumsan. Maecenas sagittis metus id ligula ullamcorper laoreet. Vivamus vehicula commodo neque a venenatis. Curabitur velit leo, mollis ut posuere nec, mollis sit amet justo. Aenean ut purus nunc. Nam magna risus, aliquet et aliquet id, posuere sit amet purus. Nullam vel fermentum nunc.</p>
        <p>Sed at orci felis. Praesent est turpis, ultrices et fringilla sed, rhoncus a arcu. Mauris volutpat massa id enim faucibus pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Donec dapibus, lacus ornare consequat gravida, tellus leo fermentum ligula, non consequat odio quam eu risus. Quisque malesuada turpis at elit malesuada eget ultrices nulla fermentum. Nulla facilisi. Nunc in mauris ante, vitae sagittis quam. Vestibulum non vestibulum eros. Curabitur hendrerit turpis non lacus lacinia vulputate.</p>
        <p>Integer non ligula in justo accumsan adipiscing nec nec sem. Proin enim diam, commodo id semper et, rutrum sit amet purus. Proin vehicula faucibus dolor in cursus. Ut metus urna, interdum in lobortis eu, fermentum non ante. Nam faucibus ultrices dui vel suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed facilisis metus in velit vehicula rhoncus. Phasellus interdum sollicitudin dui adipiscing condimentum. Nullam et metus nec quam pulvinar feugiat. Etiam vel lectus sem.</p>
      </div>
    </div>
    <div id="footer"> Big Footer jQuery lockfixed plugin. </div>
  </div>
  <script type="text/javascript">
  (function($) {
    $.lockfixed("#sidebar .menu", { offset: { top: 110, bottom: 620 } });
  })(jQuery);
  </script>
</body>

</html>

Ví dụ 2:

Sticky Scroller

Scroll your very long sticky positioned sidebar.

Why do we need JavaScript?

position: sticky is a very useful and interesting CSS3 feature. When scrolling page, navbar/header/sidebar can magically switch between static and fixed position. Usually, height of sticky element is smaller than viewport height. It means you do not need to scroll the content of sticky element.

However, when you have a sidebar with a long list and it is not able to show all content in viewport, position: sticky cannot help with this. When you scroll the page, sidebar content doesn't scroll.

You may come up with a quick solution:

sidebar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

Then you can scroll sidebar content, right?

Here are some disadvantages of above solution:

  1. You have two long scroll bars on the page and it is annoying.

  2. Scroll in a sticky/fixed element cause issues on all browsers, especially mobile browsers. You unexpectedly scroll the whole page instead of floating content sometimes.

  3. Users have to move mouse from one area to another area to scroll content. It is not a good user experience.

  4. Some users prefer to use keyboard to scroll page. They cannot scroll floating content with keyboard.

So how JavaScript can make a difference?

JavaScript syncronize scrolling of page and sticky sidebar.

  1. To avoid ugly multiple scroll bars, it forces overflow-y: hidden for floating container.

  2. Even with overflow-y: hidden, content can still be scrolled by JavaScript.

  3. When page is scrolled down / up, floating content will be scrolled in the same way.

  4. Since it listens to window, you can point mouse cursor anywhere on the page, or even use keyboard.

  5. Scrolling syncronization has the same behavior on all modern browsers. No unexpected scrolling conflicts anymore.

Download / Install

NPM + Webpack / Browserify

Install with NPM.

npm install sticky-scroller --save

Import with Webpack or Browserify.

// Old way
var StickyScroller = require("sticky-scroller");

// New way
import StickyScroller from "sticky-scroller";

Download and Link

Download latest release and unpack, you will need dist/sticky-scroller.js.

Link it in HTML.

<!-- Option 1: Vanilla JavaScript -->
<script src="path/to/sticky-scroller/dist/sticky-scroller.js"></script>

<!-- Option 2: use jQuery plugin (not recommended) -->
<script src="path/to/sticky-scroller/dist/sticky-scroller.jquery.js"></script>

RequireJS

AMD package is build for you if you prefer RequireJS.

<script src="path/to/sticky-scroller/dist/sticky-scroller.amd.js"></script>
requirejs(["StickyScroller"], function(StickyScroller) {
  // What ever you like
});

SystemJS

UMD module is placed at dist/sticky-scroller.umd.js

Usage

Change top and height (or max-height) to whatever you like. Make sure it is within viewport. You don't need overflow-y: hidden since it will be added by JavaScript.

.my-sidebar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  height: 100vh;
}
const scroller = new StickyScroller(".my-sidebar");

If you prefer to use it with jQuery:

$(".my-sidebar").stickyScroller();

API

StickyScroller(element, options)

Constructor of main controller.

element string | HTMLElement

The sticky element. Use a selector string or HTMLElement object.

options Object

No option available now.

Copyright

Copyright 2018 Guo Yunhe.

License

GNU General Public License version 3 or later.

Previousauto-refresh page once only after first load – Using JavaScript / JQuery (ok)NextSticky Scroller phần 2 (ok)

Last updated

Was this helpful?