CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapaffix
Nic H
Nic H

Reputation: 31

Bootstrap affix dissapearing on window resize

I know similar posts to this have been asked, how ever none have seemed to address the the issue with the way my page it setup. A quick rundown. So I have a navbar at the top of the page which gets affixed after the user scrolls past an image that is 100vh in height (Aka, it fills the entire top of the page initially). So i found this jQuery script which dynamically adjusts the top offset based on this images initial height when the page loads.

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 that much is fine, the affix works when the user opens the page, contents load and they begin scrolling. How ever when testing things out a little more or mobile I noticed that when the page is resized in any way after the initial load the navbar will go back to 'affix-top', only sometime resetting to the 'affix' state (typically after scrolling up past the section of the page in which the resize took place). The same thing happens on desktop when the page is resized.

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

So I am wondering, how can i make it so that the navbar stays in the 'affix' state even after the window is resized after the initial load? I am not overly familiar working with jQuery so any detailed help here would be greatly appreciated.

Upvotes: 0

Views: 232

Answers (1)

Nic H
Nic H

Reputation: 31

God I feel stupid. Was probably the easiest fix imaginable. For anyone else that may be having this sort of issue with the c/p'ed code that I used for this example. Change it to this: 

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

Upvotes: 0

Related Questions