我需要帮助实现最小化的徽标，并在页面滚动一段垂直距离后显示帖子标题。比如这个网址 Minimized Logo and show post title
答案 0 :(得分：0)
( function( window ) {
'use strict';
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 );
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();/* =Template
-------------------------------------------------------------- */
#wrapper{width:100%;margin:0 auto}#main{background-color:#fff;padding-top:150px}.container{width:80%;margin:0 auto;padding:0 30px}section{padding:60px 0}section h1{font-weight:700;margin-bottom:10px}section p{margin-bottom:30px}section p:last-child{margin-bottom:0}section.color{background-color:#3cb5f9;color:#fff}
/* =Header
-------------------------------------------------------------- */
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}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 660px) {
/* =Header
-------------------------------------------------------------- */
header h1#logo,header nav{display:block;float:none;text-align:center;margin:0 auto}header h1#logo{height:100px;line-height:100px}header nav{height:50px}header nav a{line-height:50px;margin:0 10px}header.smaller{height:75px}header.smaller h1#logo{height:40px;line-height:40px;font-size:30px}header.smaller nav{height:35px}header.smaller nav a{line-height:35px}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<header>
<div class="container clearfix">
<h1 id="logo">
LOGO
</h1>
<nav>
<a href="">Lorem</a>
<a href="">Ipsum</a>
<a href="">Dolor</a>
</nav>
</div>
</header><!-- /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>
</div>
</section>
</div>
</div><!-- #main -->
</div><!-- /#wrapper -->
请检查我上面的代码段吗？
答案 1 :(得分：0)
这就是你如何实现它。
查看此小提琴https://jsfiddle.net/ah68cv7L/5/
在标题中隐藏overflow并添加max-height，然后使用translateY翻译容器nav-head并显示两个div min-head中的一个， max-head
min-head默认是隐藏的，因为它溢出了标题最大高度，因此默认情况下只显示max-head div。
然后您在translate div上nav-head显示溢出的min-head div。
header {
max-height: 50px;
overflow: hidden;
position: fixed;
width: 100%;
top: 0;
background-color: white;
}
_top = $('article p').offset().top;
这里我们在任何滚动发生之前存储段落的原始偏移顶部。
在java脚本中，我们在container元素上使用了jquery的scroll事件。
有关滚动事件的详情，请点击here
$('.container').on('scroll', function(e) {
if (!scrolled
&& ((_top - $('article').children('p').offset().top <= 20)
|| (($('article').children('p').offset().top -_top) + ($('article').height())) > 0)) {
$('header .nav-head').css('transform', 'translateY(-55px)');
scrolled = true;
} else if (($('article').children('p').offset().top - _top == 0)
|| (($('article').children('p').offset().top -_top) + ($('article').height()))<0) {
$('header .nav-head').css('transform', 'translateY(0px)');
scrolled = false;
}
});
这里我们检查滚动上的偏移量和前滚动偏移量，如果元素滚动超过20px这是段落标题的高度。
我们将css类transform:translateY(-55px)添加到容器div。
<强>段
_top = $('article p').offset().top;
scrolled = false;
$('.container').on('scroll', function(e) {
if (!scrolled
&& ((_top - $('article').children('p').offset().top <= 20)
|| (($('article').children('p').offset().top -_top) + ($('article').height())) > 0)) {
$('header .nav-head').css('transform', 'translateY(-55px)');
scrolled = true;
} else if (($('article').children('p').offset().top - _top == 0)
|| (($('article').children('p').offset().top -_top) + ($('article').height()))<0) {
$('header .nav-head').css('transform', 'translateY(0px)');
scrolled = false;
}
});body {
width: 100%;
height: 100%;
overflow:hidden;
}
.container{
overflow-y:auto;
height:600px;
}
.max-head {
text-align: center;
padding-bottom: 15px;
}
.mini-head-title{
position: relative;
top: -15px;
}
.logo{
padding:5px;
}
header {
max-height: 50px;
overflow: hidden;
position: fixed;
width: 100%;
top: 0;
background-color: white;
}
.nav-head {
transition: all 0.6s ease;
}
article {
margin-top: 50px;
background-color:#eee;
}
.head-title {
height: 20px;
}
.dont-minimize{
background-color:red;
font-size: 2em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header>
<div class="nav-head">
<div class="max-head">
<img class = "logo" src="https://jsfiddle.net/img/logo.png">
</div>
<div class="min-head">
<img class="logo" src="https://jsfiddle.net/img/logo.png">
<span class="mini-head-title">Some Title</span>
</div>
</div>
</header>
<article>
<div class="head-title">Some Title</div>
<p>
Every time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments,
but when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending
a bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along with the instructions below to learn how to make this ridiculously easy artwork at home!Every
time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments, but
when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending a
bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along with
Every time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments,
but when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending
a bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along with the instructions below to learn how to make this ridiculously easy artwork at home!Every
time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments, but
when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending a
bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along withEvery time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments,
but when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending
a bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along with the instructions below to learn how to make this ridiculously easy artwork at home!Every
time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments, but
when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending a
bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along withthe instructions below to learn how to make this ridiculously easy artwork at home!Every
time I go to a home store, I fall in love with the wall hangings, paintings, and wooden boxes that have cute sayings on them, like “live, laugh, love” and “family first.” I always want to buy them for my apartment and for my friends’ apartments, but
when I look at the price tag, I’m dumbfounded! How could something so simple cost so much? If you’re anything like me and always find yourself lusting over these lovely pieces of artwork, you’re going to love this simple DIY. Instead of spending a
bunch of money on cute prints and clever sayings, make your own! All you need for this project are a few simple art supplies and a picture frame. Follow along with the instructions below to learn how to make this ridiculously easy artwork at home!
</p>
</article>
<div class="dont-minimize">
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
some thing else.. I dont need minified div
</div>
</div>