Question

我一直在寻找在滚动时调整（缩小）网站标题的方法。找到一个效果很好的例子。这里的工作示例JsFiddle

索引

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="" />
<title>Header Resize On Scroll with Animations</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />

<script src="js/classie.js"></script>

<script>
    function init() {
        window.addEventListener('scroll', function(e){
            var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 300,
                header = document.querySelector("blk, header");
            if (distanceY > shrinkOn) {
                classie.add(header,"smaller");
            } else {
                if (classie.has(header,"smaller")) {
                    classie.remove(header,"smaller");
                }
            }
        });
    }
    window.onload = init();
</script>
</head>

<body>
<div id="wrapper">

<header>
    <div class="container clearfix">
        <div class="sub-header">
            hi
        </div>
        <h1 id="logo">
            LOGO
        </h1>
        <nav>
            <a href="">Lorem</a>
            <a href="">Ipsum</a>
            <a href="">Dolor</a>
        </nav>
    </div>
</header>
<div id="main">
    <div id="content">
        <section>
            <div class="container">
                <h1>Header Resize On Scroll with Animations</h1>
                <p>Cupcake ipsum dolor sit amet lollipop. Macaroon candy cotton candy bear claw macaroon carrot cake pastry icing dessert. Cupcake pastry tart sesame snaps lollipop donut pie. Cookie apple pie toffee lemon drops jelly beans cheesecake sweet roll. Jelly-o soufflé donut candy canes wafer dragée sweet cheesecake. Macaroon caramels pie cookie gummi bears. Ice cream jelly-o toffee cookie gingerbread cookie. Soufflé fruitcake jelly-o jelly chupa chups jelly beans. Dragée marzipan pastry macaroon oat cake muffin soufflé topping liquorice. Jelly-o chocolate cake lollipop.</p>
                <p>Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake.</p>
                <p>
                    <a href="http://www.callmenick.com/tutorials/create-an-animated-resizing-header-on-scroll">&laquo; Go back to this tutorial?</a><br>
                    <a href="http://www.callmenick.com/tutorials">&laquo; Go back to all tutorials?</a>
                </p>
            </div>
        </section>
    </div>
</div>
</div>
</body>
</html>

CSS

header {
width:100%;
height:150px;
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:999;
background-color:#0683c9;
-webkit-transition:height .3s;
-moz-transition:height .3s;
-ms-transition:height .3s;
-o-transition:height .3s;
transition:height .3s;
}

header h1#logo {
display:inline-block;
height:150px;
line-height:150px;
float:left;
font-family:Oswald, sans-serif;
font-size:60px;
color:#FFF;
font-weight:400;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
}

header nav {
display:inline-block;
float:right;
}

header nav a {
line-height:150px;
margin-left:20px;
color:#9fdbfc;
font-weight:700;
font-size:18px;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
transition:all .3s;
}

header nav a:hover {
color:#FFF;
}

header.smaller {
height:75px;
}

header.smaller h1#logo {
width:150px;
height:75px;
line-height:75px;
font-size:30px;
}

header.smaller nav a {
line-height:75px;
}

.sub-header {
background-color:#000;
height:40px;
color:#999;
width:100%;
}

.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0;
}

和 js

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );

问题。

我所拥有的是一个固定的标题，分为两部分（标题和子标题）。喜欢下面的那个

将子标题添加到上面的代码后，标题会像往常一样缩小，但子标题（黑色）仍然存在。我希望标题缩小，子标题在滚动时消失。

我一遍又一遍地尝试了一些方法，但是只是无法让子标题在滚动

上消失

你们中的任何人都可以建议我如何完成这项工作。

Answer 1

考虑调整CSS（较小的类定义），例如：

header.smaller {
    height: 5px; /* or even lesser */
}

工作示例：https://jsfiddle.net/qc01zwyg/

编辑：

为了使黑色子消失，将其CSS定位在.smaller选择器下。

header.smaller {
  height: 75px;
}

header.smaller .menu {
  display: none;
}

更新示例：https://jsfiddle.net/qc01zwyg/2/

Answer 2

你应该为子标题添加样式来改变它

.menu {
  background-color: #000;
  height: 40px;
  color: #999;
  width: 100%;
  transition: height .3s;
}

.smaller .menu {
  height: 0;
  overflow: hidden;
}

使用子标题缩小滚动的固定标题

2 个答案: