css 滚动事件特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 37 13



特效描述:滚动事件。Headroom.js是一个轻量级高性能的JS插件 ,响应用户鼠标滚动操作。弹出或隐藏顶部导航菜单。

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/main.css?v=1">
<link rel="stylesheet" href="css/main.css?v=1">

2. 引入JS

<script src="js/main.js?v=1"></script>
<script src="http://www.jq22.com/js/jq.js"></script>
<script src="js/main.js?v=1"></script>
<script src="http://www.jq22.com/js/jq.js"></script>

3. HTML代码

<!DOCTYPE html>

<html>

<head>

  <title></title>

  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="css/main.css?v=1">

  <meta name="description" content="Headroom.js is a lightweight, pure JS widget for hiding elements until needed. Give your pages some headroom">

  <meta property="og:title" content="Headroom.js - Give your pages some headroom. Hide your header until you need it.">

  <meta property="og:type" content="website">

  <meta name="twitter:card" content="summary">

</head>

<body class="language-javascript">

<header id="header" class="header header--fixed hide-from-print" role="banner">

  <div class="container">

    <nav id="nav" class="nav-wrapper" role="navigation">

      <ul class="nav nav--main">

        <li class="nav__item ">

          <a class="header__link subdued" href="#">

            <span aria-hidden="true" class="icon icon--github"></span>

            <span class="complimentary push--left">GitHub</span>

          </a>

        </li>

        <li class="nav__item">

          <a class="header__link subdued" href="#">

            <span aria-hidden="true" class="icon icon--twitter"></span>

            <span class="complimentary push--left">@WickyNilliams</span>

          </a>

        </li>

      </ul>

    </nav>

      <b class="brand__forename">Headroom</b><b class="brand__surname">.js</b>

  </div>

</header>

<article>

<header class="feature">

  <div class="container container--wide feature-title">

    <h1 class="feature-title__title headroom-title">Playroom</h1>

    <p class="feature-title__subtitle">An interactive playground where you can tinker with headroom's options</p>

  </div>

</header>

<div class="container block main" role="main">

  <p>

    Tweak the options below and see what effect they have. The example styles are using slightly modified effects from the fantastic animate.css

  </p>

  <p>

     As you change the options they are automatically applied to the page's header. Example code is also generated below as you make changes.

  </p>

  <form class="form">

    <fieldset class="question-set">

      <legend class="question-set__title">

        <h3>Options</h3>

      </legend>

      <div class="grid">

        <div class="grid__item one-half">

          <label class="question-set__label question-set__label--block" for="offset">Offset</label>

          <input class="question-set__input" type="number" name="offset" id="offset" value="205">

        </div>

        <div class="grid__item one-half">

          <label class="question-set__label question-set__label--block" for="tolerance">Tolerance</label>

          <input class="question-set__input" type="number" name="tolerance" id="tolerance" value="5">

        </div>

      </div>

    </fieldset>

    <fieldset class="question-set push--remove-bottom">

      <legend class="question-set__title">

        <h3>Styles</h3>

      </legend>

      <div class="grid">

        <div class="grid__item one-half lap--one-quarter">

          <label class="question-set__label" for="slide">

            <input type="radio" id="slide" value="slide" name="style" checked="checked"> Slide</label>

        </div>

        <div class="grid__item one-half lap--one-quarter">

          <label class="question-set__label" for="swing">

            <input type="radio" id="swing" value="swing" name="style"> Swing</label>

        </div>

        <div class="grid__item one-half lap--one-quarter">

          <label class="question-set__label" for="flip">

            <input type="radio" id="flip" value="flip" name="style"> Flip</label>

        </div>

        <div class="grid__item one-half lap--one-quarter">

          <label class="question-set__label" for="bounce">

            <input type="radio" id="bounce" value="bounce" name="style"> Bounce</label>

        </div>

      </div>

    </fieldset>

  </form>

  <h3>Widget code</h3>

  <p>

      Using plain JS, pass the options as the second argument to the constructor. Be aware that when using headroom in this way, the options aren't automatically merged with the defaults (so you must define every property).

  </p>

  <pre class="language-javascript widget-code"><code></code></pre>

  <h3>Plugin code</h3>

  <p>

      Using the plugin, options are automatically merged with the defaults (deep-merged using $.extend(true, {}, defaultOptions, yourOptions)).

  </p>

  <pre class="language-javascript plugin-code"><code></code></pre>

  <h3>Data API code</h3>

  <p>

      If you're using the data-* API, define any property as a data attribute. Options supplied via the data-* API are also deep-merged with defaults. Supply a JSON object to alter the classes used by headroom.js

  </p>

  <pre class="language-javascript data-api-code"><code></code></pre>

</div>

</article>

<script src="js/main.js?v=1"></script>

<script src="http://www.jq22.com/js/jq.js"></script>

</body>

</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到