ページスクロールのヘッダーに最小化されたロゴを実装するにはどうすればよいですか？

私は、最小限のロゴを実装する際に助けが必要です。また、ページが垂直方向にいくつかスクロールされた後に投稿のタイトルを表示します。このURL Minimized Logo and show post titleページスクロールのヘッダーに最小化されたロゴを実装するにはどうすればよいですか？

出典

2017-05-26 Daniel Omara

実際にワードプレスを使用してブログを設計します。 –

(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

私はそれをチェックしましたが、コードはあまりにもたくさんあるようですが、はるかに簡単なオプションがほしいと思っていました。どうも –

これはどのように達成できるかです。

チェックアウトあなたのヘッダーでこのフィドルhttps://jsfiddle.net/ah68cv7L/5/

隠すoverflowとはmax-height追加して、デフォルトで隠されているコンテナnav-headを変換するためにtranslateYを使用し、2つのdivのmin-headとmax-head

min-headのいずれかを示しているためヘッダーの最大高さをオーバーフローしたので、デフォルトではmax-head divのみが表示されます。

nav-head divのtranslateを入力して、オーバーフローしたmin-head divを表示します。いずれかのスクロールが発生する前に

_top = $('article p').offset().top;

header { 
    max-height: 50px; 
    overflow: hidden; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    background-color: white; 
}

は、ここでは、段落のオリジナルのオフセットトップを格納しています。

Javaスクリプトでは、container要素でjqueryのscrollイベントを使用しています。

スクロールイベントの詳細については、我々の前にスクロールオフセットをスクロールにオフセットと要素はタイトルの高さである以上20pxをスクロールされた場合にチェックされている。ここ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; 
    } 
});

をクリックしてください段落。

コンテナdivにtransform:translateY(-55px)というCSSクラスを追加しています。アロイス・デ・ラ・Combleアム@

SNIPPET

_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

ページスクロールのヘッダーに最小化されたロゴを実装するにはどうすればよいですか？

答えて

関連する問題