ブートストラップ貼り付けウィンドウのサイズ変更

Question

私はこれに似たポストを知っています。どのように私のページのセットアップ方法で問題に対処していないようです。クイックルウンダウン。だから私は、ページの上部にユーザーが高さ100vhの画像をスクロールした後に貼り付けられるようになっています（別名、最初はページの上部全体を塗りつぶしています）。だから私は動的にページの読み込み時にこの画像の初期の高さに基づいてトップオフセットを調整するこのjQueryスクリプトを発見しました。

jQueryの

var $attribute = $('[data-smart-affix]'); 
$attribute.each(function(){ 
    $(this).affix({ 
    offset: { 
    top: $(this).offset().top, 
    } 
    }) 
}) 
$(window).on("resize", function(){ 
    $attribute.each(function(){ 
     $(this).data('bs.affix').options.offset = $(this).offset().top 
    }) 
}); 

だから多くは、ユーザーがページ、コンテンツの負荷を開き、彼らはスクロール開始時に接辞の作品、結構です。どのようにテストするのか、もう少し調べてみると、最初のロード後にページがどのようにリサイズされたとしても、navbarは 'affix-top'に戻り、たまに 'affix'状態にリセットされますサイズ変更が行われたページのセクションを上にスクロールします）。ページがリサイズされたときにデスクトップでも同じことが起こります。

<nav id="topNav" class="navbar navbar-inverse navbar-static-top" data-spy="affix" data-smart-affix data-offset-top=""><!--TOP AFFIX NAVBAR | START--> 
    <div class="container"> 
     <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
     </div> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li data-toggle="tooltip" data-placement="bottom" title="Back to the Top!"><a href="#top" class="ripplelink"><span class="glyphicon glyphicon-chevron-up"></span></a></li> 
       <li><a href="#profile" class="ripplelink">My Profile</a></li> 
       <li><a href="#skills" class="ripplelink">Skills</a></li> 
       <li><a href="#" class="dropdown-toggle ripplelink text-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Experiences&nbsp;&nbsp;<span class="caret"></span></a> 
        <ul class="dropdown-menu inverse-dropdown"> 
         <li><a href="#experience">Education</a></li> 
         <li><a href="#work">Work Experience</a></li> 
         <li><a href="#humanitarian">Humanitarian Work</a></li> 
        </ul> 
       </li> 
       <li><a href="#activities" class="ripplelink">Interests</a></li> 
       <li><a href="#gallery" class="ripplelink">Gallery</a></li> 
       <li><a href="#feedback" class="ripplelink">Feedback</a></li> 
       <li><a href="#contact" class="ripplelink">Contact Me</a></li> 
      </ul> 
     </div> 
    </div> 
</nav><!--TOP AFFIX NAVBAR | END--> 

CSS

.affix { 
    top: 0; 
    width: 100%; 
    z-index: 250; 
} 
.affix-top { 
    position: absolute; 
    width: 100%; 
} 
.affix + .container-fluid { 
    padding-top: 70px; 
} 

HTMLは、だから私は、ナビゲーションバーがウィンドウであっても後に '接辞' 状態に留まるように私はそれを作ることができるか、疑問に思って初期ロード後にサイズ変更されましたか？私はあまりにもjQueryの使用に精通していないので、ここで詳細なヘルプがあれば幸いです。

Answer 1

神私は愚かだと感じます。おそらく、想像できる最も簡単な修正だったでしょうか。この例で使用したc/p'edコードでこの種の問題を抱えている可能性がある他の人のために。これに変更してください：

var $attribute = $('[data-smart-affix]'); 
$attribute.each(function(){ 
    $(this).affix({ 
    offset: { 
    top: $(this).offset().top, 
    } 
}); 
}); 
$(window).on("resize", function(){ 
    $attribute.each(function(){ 
    if(this.height < 100 + "vh") { 
     $(this).data('bs.affix').options.offset = $(this).offset().top 
    } 
    }); 
});