1. 首頁
  2. 問答
  3. 如何在頁面滾動中實現頁眉中最小化的徽標？

如何在頁面滾動中實現頁眉中最小化的徽標？

2017-05-26 37 views

回答

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 -->

請你檢查我上面的代碼？

來源

2017-05-26 09:15:19 purvik7373

+0

我檢查過那個，但代碼似乎太多了，但我想要一個更簡單的選項。謝謝 –

0

這是你如何實現它。

結帳這個小提琴https://jsfiddle.net/ah68cv7L/5/

隱藏overflow在你的頭，並添加max-height然後用translateY到容器nav-head翻譯和顯示兩個DIV min-head和max-head

min-head的一個默認是隱藏的，因爲它溢出了標頭最大高度，所以默認只顯示max-head div。

然後你在nav-head div上做translate div來顯示溢出的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的滾動事件。

上滾動事件的更多信息，請點擊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) 
 
    \t \t \t \t \t || (($('article').children('p').offset().top -_top) + ($('article').height()))<0) { 
 
    \t \t \t \t 
 
      $('header .nav-head').css('transform', 'translateY(0px)'); 
 
    \t \t \t \t \t 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>

來源

2017-05-26 10:25:55

相關問題

 相關問題