Bootstrap Affix verschwinden auf Fenstergröße

Question

Ich weiß, ähnliche Beiträge wurden gefragt, wie auch immer keiner schien das Problem mit der Art und Weise, wie meine Seite es eingerichtet. Ein kurzer Überblick. So habe ich eine Navbar am oberen Rand der Seite, die angebracht wird, nachdem der Benutzer ein Bild mit 100vh Höhe scrollt (aka, füllt es zunächst die gesamte Oberseite der Seite). So fand ich dieses jQuery-Skript, das den oberen Versatz basierend auf der anfänglichen Höhe dieses Bildes beim Laden der Seite dynamisch anpasst.

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 
    }) 
}); 

So so viel ist in Ordnung, das Affix funktioniert, wenn der Benutzer die Seite öffnet, laden Inhalte, und sie beginnen zu scrollen. Wie auch immer, beim Testen der Dinge ein wenig mehr oder mobile Ich bemerkte, dass, wenn die Seite in irgendeiner Weise nach der ersten Belastung geändert wird die Navbar zurück zu "Affix-top", nur manchmal in den 'Affix' Zustand (in der Regel nach Scrollen über den Abschnitt der Seite nach oben, in der die Größenänderung stattgefunden hat. Das Gleiche passiert auf dem Desktop, wenn die Größe der Seite geändert wird.

CSS

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

HTML

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

Also ich frage mich, wie kann ich es machen, so dass die navbar im 'Affix' Zustand bleibt auch nach dem das Fenster nach der anfänglichen Belastung geändert? Ich bin nicht allzu vertraut mit jQuery arbeiten, so würde jede detaillierte Hilfe hier sehr geschätzt werden.

Answer 1

Gott ich fühle mich dumm. War wahrscheinlich die einfachste vorstellbare Lösung. Für alle anderen, die dieses Problem mit dem c/p-Code haben, den ich für dieses Beispiel verwendet habe. Ändern Sie diese Einstellung wie folgt:

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 
    } 
    }); 
});