Menu icon Foundation
Sticky Top Bar and dynamic page content

I'm having a problem with the sticky top bar not sticking if page content is loaded dynamically. I have a list of names that is loaded using jQuery.ajax - this is the only content on the page below the top bar. If I hardcode the same list of names on the page and comment out the ajax loading, the sticky effect works fine. I found a reference in the Interchange documentation that if new content is added to the page after loading you need to call $(document).foundation(). I tried that after the ajax call completes inserting content into the page. That alone did not work. Through trial and error I found that if I force the page to scroll vertically by 1 pixel, then I call $(document).foundation(), the sticky top bar starts working again. See accompanying code snippet

The side effect, however, of this script is that my filter input control (for filtering the list of names) in the top bar loses focus when $(document).foundation() runs. As you are typing a filter value, the list is updated based on what you type (by calling loadContactList()), but as you type the input control loses focus as soon as $(document).foundation() executes.

Anyone else run into a similar problem with the sticky top bar and dynamic content who found a good way to resolve it?

function loadContactList(isFilter){
    ...//get the name list and build HTML string
    $("#contactList").html(strHtml);
    window.scroll(0,1);
    //through trial and error found slight delay needed before calling .foundation()
    setTimeout(function() {
    $(document).foundation();
    },1000););
}            

            

         

stickydynamic contenttop bar

I'm having a problem with the sticky top bar not sticking if page content is loaded dynamically. I have a list of names that is loaded using jQuery.ajax - this is the only content on the page below the top bar. If I hardcode the same list of names on the page and comment out the ajax loading, the sticky effect works fine. I found a reference in the Interchange documentation that if new content is added to the page after loading you need to call $(document).foundation(). I tried that after the ajax call completes inserting content into the page. That alone did not work. Through trial and error I found that if I force the page to scroll vertically by 1 pixel, then I call $(document).foundation(), the sticky top bar starts working again. See accompanying code snippet

The side effect, however, of this script is that my filter input control (for filtering the list of names) in the top bar loses focus when $(document).foundation() runs. As you are typing a filter value, the list is updated based on what you type (by calling loadContactList()), but as you type the input control loses focus as soon as $(document).foundation() executes.

Anyone else run into a similar problem with the sticky top bar and dynamic content who found a good way to resolve it?

function loadContactList(isFilter){
    ...//get the name list and build HTML string
    $("#contactList").html(strHtml);
    window.scroll(0,1);
    //through trial and error found slight delay needed before calling .foundation()
    setTimeout(function() {
    $(document).foundation();
    },1000););
}