1

ユーザーがページを下にスクロールし始めると、非表示になっているが表示され、上部に固定されるメニューを作成しようとしています。これまでのところ、スクロール時に一番上にくっつくメニューを作成できましたが、最初にこのメニューを非表示にする方法にこだわっています。

これは私がこれまでに使用しているコードです: (私は wordpress-headway を使用しています)

JQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
 //STICKY NAV
 var isMobile = {
 Android: function() {
 return navigator.userAgent.match(/Android/i) ? true : false;
 },
 BlackBerry: function() {
 return navigator.userAgent.match(/BlackBerry/i) ? true : false;
 },
 iOS: function() {
 return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
 },
 Windows: function() {
 return navigator.userAgent.match(/IEMobile/i) ? true : false;
 },
 any: function() {
 return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
 }
 };
//Calculate the height of <header>
 //Use outerHeight() instead of height() if have padding
 var aboveHeight = $('.top-row').outerHeight();

 //when scroll
 $(window).scroll(function(){

 //if scrolled down more than the header’s height but this isn't mobile
 if ($(window).scrollTop() > aboveHeight && !isMobile.any()){

 // if yes, add “fixed” class to the <nav>
 // add padding top to the #content 
 // (value is same as the height of the nav)
 $('.block-type-navigation').addClass('fixed').css('top','0').next()
 .css('padding-top','42px');

 } else {

 // when scroll up or less than aboveHeight,
 // remove the “fixed” class, and the padding-top
 $('.block-type-navigation').removeClass('fixed').next()
 .css('padding-top','0');
 }
 });
});
</script>

CSS:

.fixed {
     position:fixed !important;
      left: 0;
      text-align: center;
}
.fixed .block-content {
      display: inline-block;
      text-align: left;
      width: 940px; /* This should be the width of your grid!!! */
      float:none;
}
.fixed {
position:fixed !important;    
 left: 0;      
text-align: center;
display: block !important;
}

それは私を夢中にさせているので、助けていただければ幸いです！

ありがとうございました！

4

1 に答える 1

0

ユーザーがスクロールして特定のポイントを通過しない限り、ナビゲーションを表示したくない場合は、常に画面の上部から固定することはできません。

.menu {
    position:fixed;
    top:-42px;
}

次に、クラスを切り替えて表示または非表示にします

.menu.is-visible {
    top:0;
}

スクロール リスナーを使用します。

$win = $(window);
$win.on('scroll', function() {
    $(".menu").toggleClass('is-visible', $win.scrollTop() > 42);
});

topプロパティに CSS アニメーションを追加することもできます

.menu {
    -webkit-transition: top 0.2s ease-in-out;
}

クールなトランジションを得るために。

注: このコードはすべてここに直接入力されており、テストされていません。

注:スクロール ハンドラーにも必ずスロットルを設定する必要があります。

于 2013-03-13T20:00:34.323 に答える