スクロールでWordpressヘッダーが固定ジャンプする

Question

スクロールでヘッダーを固定しようとしています。

あなたはスクロールダウンした場合にも、あなたはそれが .Hereがwebsiteあるジャンプが表示されます、私はこのコードを書いたが、それは正しく作業ていません。ありがとうございました。

<script > 
$(document).ready(function($) { 
    jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > 40) { 
     jQuery('#masthead').addClass('small-logo'); 
    } else { 
     jQuery('#masthead').removeClass('small-logo'); 
    } 
}); 
jQuery(window).scroll(function() { 
    if (jQuery(this).scrollTop() > 40) { 
     jQuery('#site-navigation').addClass('fixed-menu'); 
    } else { 
     jQuery('#site-navigation').removeClass('fixed-menu'); 
    } 
    }); 
}); 

</script> 


    .small-logo{ 
    position:fixed; 
    width: 100%; 
    z-index: 999; 
} 
    .fixed-menu{ 
    position:fixed; 
    margin-top: 0; 
    top:160px; 
    } 

Answer 1

これは正常な動作です。アニメーション付きの良い固定ヘッダーを書くのは簡単ではありません。私はこのプラグインを使用し、それが文書でhttp://leafo.net/sticky-kit/

の準備ができて私のために素敵な作品：

$('.your-sticky-item-class').stick_in_parent(); 

は、自分のサイト上のすべての手順を参照してください。

Answer 2

コメントに記載された自分自身と@ovokuroとして、ドキュメントフローから取り除いているからです。 codepen hereの簡単な例を参照してください。

ロゴを小さくするには、同じプリンシパルを使用します...希望のトリガーポイントにクラスを追加します。このトリガーポイントによって、cssで要素が小さくなります。この手段 - あなたが流れの外にヘッダを取る固定：あなたはそれはきれい "

希望を見えるようにするために、単純なCSSトランジションを追加することができ、この

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() > 300) { 
 
     $('.nav-fixed-container').addClass('fixed'); 
 
    } else { 
 
     $('.nav-fixed-container').removeClass('fixed'); 
 
    } 
 
    }); 
 
});

body { 
 
    margin:0; 
 
} 
 
/*add the fixed height here.. we could also retrieve this using jquery*/ 
 
.nav-container { 
 
    height:130px; 
 
    width:100%; 
 
    margin:0; 
 
    white-space: nowrap; 
 
    font-size: 0; 
 
} 
 
.masthead { 
 
    width:100%; 
 
    background:red; 
 
    margin:0; 
 
    font-size:18px; 
 
} 
 
.logo { 
 
    width:90px; 
 
    height:90px; 
 
    background:purple; 
 
    font-size:18px; 
 
} 
 

 
.body { 
 
    width:100%; 
 
    height:1800px; 
 
    background:green; 
 
    padding:0; 
 
    font-size:18px; 
 
} 
 
li { 
 
    float:left; 
 
    list-style:none; 
 
margin-right:20px; 
 
    font-size:18px; 
 
} 
 
.nav { 
 
    background:blue; 
 
    width:100%; 
 
    height:40px; 
 
} 
 
.nav-fixed-container { 
 
    width:100%; 
 
    transition: 0.5s ease-In-Out; 
 
} 
 
.fixed { 
 
    position:fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav-container"> 
 
    <div class="nav-fixed-container"> 
 
    <div class="masthead"> 
 
     <div class="logo">logo</div> 
 
    </div> 
 
    <div class="nav"> 
 
     <ul> 
 
     <li>menu link 1</li> 
 
     <li>menu link 2</li> 
 
     <li>menu link 3</li> 
 
     <li>menu link 4</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="body"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed fringilla diam, at facilisis eros. Nulla molestie urna neque, ac tristique odio ullamcorper et. Nulla nec elit non velit euismod consectetur. Fusce rhoncus pharetra imperdiet. Suspendisse quis felis maximus, porttitor ante at, egestas augue. Pellentesque est augue, venenatis in felis vitae, venenatis malesuada nunc. In eget fermentum neque. Sed vitae dapibus diam. Fusce vehicula augue eu ornare euismod. Etiam rutrum eu turpis in ullamcorper. Mauris facilisis faucibus rutrum 
 
    <br><br><br>. Sed ac justo et purus luctus cursus. Nulla non sapien molestie ipsum bibendum mollis. 
 

 
Integer convallis sodales dui, in cursus tellus vestibulum sit amet. Integer id enim laoreet, vehicula metus et, condimentum urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id commodo dolor, vel commod<br><br><br><br>o odio. Nam ipsum nisl, volutpat ac sapien aliquet, suscipit consectetur nisi. Mauris scelerisque risus dui, sed viverra libero rhoncus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridicul<br><br><br>us mus. Sed blandit, ante in dapibus posuere, urna leo efficitur ipsum, in ornare ligula nunc et eros. 
 
<br><br> 
 
Ut bibendum libero dolor, quis tempor est dapibus nec. Etiam dapibus justo ac risus mattis, nec convallis augue tincidunt. Duis varius id ligula sed scelerisque. Nam at elementum mauris. Nullam<br><br><br> mattis, mauris sit amet dapibus lobortis, diam nibh gravida neque, nec rutrum nunc mauris sed elit. Nulla et est consectetur, dapibus felis at, fermentum ante. Sed orci ipsum, luctus ac imperdiet vitae, ornare sit amet leo. Quisque sit amet dolor neque. Aenean ac lorem quam. Curabitur massa est, rhoncus ac iaculis sit amet, maximus id ante. Aene<br><br>an aliquam tincidunt nunc sit amet hendrerit. Nulla consectetur velit vitae dignissim dictum. Vivamus gravida pharetra sem in vestibulum. Nulla </div>