阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Scroll up bar 中文API文档

      插件 jQuery.Scroll up bar 中文API文档 https://github.com/eduardomb/scroll-up-bar

      ScrollUpBar Plugin

      The scroll up bar plugin (jQuery) hides the top bar when scrolling down, and show it when scrolling up. It’s specially useful on mobile interfaces to save some precious space.

      Demos

      Installation

      Include jQuery and scroll-up-bar.min.js scripts:

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <script src="scroll-up-bar.min.js"></script>
      

      Bower users can get the source with:

      bower install scroll-up-bar
      

      Basic Usage

      Create a top bar using position absolute.

      <div id="topbar" style="position: absolute; top: 0; left: 0; width: 100%; background: #ccc;">
        Top bar
      </div>
      

      Tip: you can also add top different than zero

      And then invoke scrollupbar() on the element.

      $('#topbar').scrollupbar();
      

      Alternatively you can invoke with $.scrollupbar($('#topbar'))

      Options

      You can pass callback functions in initialization to handle bar visibility events.

      • enterViewport - when the bar enters the viewport
      • fullyEnterViewport - when the bar is completely in the viewport
      • exitViewport - when the bar completely leaves the viewport
      • partiallyExitViewport - when the bar goes from being fully in the viewport to only partially

      Checkout the callback example.

      Properties

      There are two global boolean properties that are updated according to bar visibility.

      • $.scrollupbar.isInViewport - true if any part of the bar is visible, false if not
      • $.scrollupbar.isFullyInViewport - true if the entire bar is visible

      Methods

      • $.scrollupbar.destroy - restores bar to original position and disables plugin

      Browser support

      The plugin was tested on:

      • Chrome
      • Firefox
      • Safari
      • Opera
      • IE

      Contributing

      Read the Contributing document for instructions on how to set up your development environment to build and test scroll-up-bar.

      目录
      目录