Headroom.js 滚动隐藏和展示页面元素，从而为页面留下更多空间。

最新推荐文章于 2024-11-06 07:16:12 发布

转载最新推荐文章于 2024-11-06 07:16:12 发布 · 87 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/momomo1987/blog/1486253

本文介绍如何使用Headroom.js库为页面元素创建平滑的滚动效果。提供了纯JavaScript、jQuery/Zepto及AngularJS等多种调用方式，并附带了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

http://www.bootcss.com/p/headroom.js/

http://blog.youkuaiyun.com/chenyulearn/article/details/19606751

纯JS调用

Include the headroom.js script in your page, and then:

// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();

jQuery/Zepto调用

Include the headroom.js and jQuery.headroom.js scripts in your page, and then:

// simple as this!
// NOTE: init() is implicitly called with the plugin
$("header").headroom();

The plugin also offers a data-* API if you prefer a declarative approach.

<!-- selects $("[data-headroom]") -->
<header data-headroom>

Note: Zepto's additional data module is required for compatibility.

AngularJS调用

Include the headroom.js and angular.headroom.js scripts in your page, and include the Headroom module

angular.module('app', [
// your requires
'headroom'
]);

And then use the directive in your markup:

<header headroom></header>
<!-- or -->
<headroom></headroom>
<!-- or with options -->
<headroom tolerance='0' offset='0' scroller=".my-scroller" classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

Note: in AngularJS, you cannot pass a DOM element as a directive attribute. Instead, you have to provide a selector that can be passed to angular.element. If you use default AngularJS jQLite selector engine, here are the compliant selectors.

转载于:https://my.oschina.net/momomo1987/blog/1486253