Question

我想制作一个粘性标题以将宽度缩小到100％（使用动画）。当页面向上滚动到顶部时，向下滚动页面并返回到带动画的正常状态。

参考网站：

以下是清除的示例：

要求：

要求是克隆包含登录和尝试免费菜单项的辅助导航。我试图克隆这个并且我在某种程度上获得了成功，但是因为它在战争演示版网站中有动画而无法动画。

我的努力：我尝试过自己，这里是JSFiddle

的链接

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Sticky Header Plugin Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" type="text/css">
<style>
body {
    min-height: 300vh;
    font-family:'Roboto';
    background-color:#4FC2E5;
    color:#fff;
}
p {
    font-family:1.2em;
    line-height:1.8
}
.container {
    max-width: 728px;
    margin: 50px auto;
}
.header {
    width: 100%;
    float: left;
    background: #232323;
}
.site-brand {
    width: 20%;
    float: left;
    padding-left: 20px;
}
.navbar {
    width: 80%;
    float: right;
}
h1 {
    margin: 70px auto
}
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
}
.navbar ul {
    display: flex;
    margin: 0;
    padding: 0;
}
.navbar ul li {
    display: block;
    flex: 1;
    text-align: center;
    font-size: 24px;
    padding: 12px 0;
    font-family: 'Helvetica Neue', sans-serif;
}
.navbar ul li a {
    color: #fff;
    text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
  <h1>Primary Navigation</h1>
  <div id="sticky-header" class="header">
    <div class="site-brand">Logo</div>
    <nav class="navbar">
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
      </ul>
    </nav>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel molestie velit, ullamcorper sodales elit. Vivamus efficitur libero in commodo pulvinar. Vivamus scelerisque convallis arcu, in laoreet massa viverra a. Ut sodales urna id velit placerat congue. Aliquam et ultricies nisl. Vivamus id metus ut justo accumsan rutrum vitae a lacus. Maecenas et euismod mauris. Aenean feugiat magna sed enim elementum hendrerit. Vivamus porttitor nunc felis, at iaculis nunc cursus vel.</p>
  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ut elit nec enim aliquet euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In placerat risus vitae neque hendrerit, sed semper nisl aliquet. In fringilla purus vitae ligula facilisis, et sodales purus congue. Cras pretium id nisi a pulvinar. Morbi eu rhoncus magna. Phasellus eu arcu diam. Aliquam a neque sit amet nulla consectetur interdum sit amet ac eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris gravida magna urna, sed consectetur mauris semper eu. Ut a dolor dui. Aliquam quis ante id ligula malesuada porttitor at vel felis. Donec nisi arcu, eleifend id magna volutpat, tempor fringilla elit.</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
/**
 * Simple Sticky Header
 *
 * More info: https://github.com/oenstrom/simple-sticky-header/
 *
 * @author Olof Enström
 * @version 0.9.0
 * @copyright Olof Enström 2017
 * @license GPL-3.0+
 * https://github.com/oenstrom/simple-sticky-header/blob/master/LICENSE
 */
(function($) {
    $.fn.simpleStickyHeader = function(options) {
        var that = this;
        var headerOffsetTop = that.offset().top;

        var settings = $.extend({
            class: "sticky-header"
        }, options);

        var toggleFixedClass = (function toggleFixed() {
            that.toggleClass(settings.class, $(window).scrollTop() >= headerOffsetTop);
            return toggleFixed;
        })();

        $(window).scroll(toggleFixedClass);

        return this;
    };
}(jQuery));

</script>
<script>
$(function() {
            $("#sticky-header").simpleStickyHeader();
        });
</script>
</body>
</html>

使用动画

0 个答案: