Scroll to bookmark with jQuery in a Bootstrap layout requires a delay

Question

I have the following layout containing of o list of category links and the actual content. On medium -> very large view ports, it will display like the following:

Category links            Content

                          <p id="jumpBookmark"> </p>
Link 1                    Some very long text #1 
Link 2                    Some very long text #2 
Link 3                    Some very long text #3 
Link 4                    Some very long text #4 
Link 5                    Some very long text #5 
Link 6                    Some very long text #6 

When user presses a category link, it will reload the same view, but filtered by category.

On small view ports, Bootstrap will adapt the layout, so that it looks like this:

Link 1                    
Link 2                    
Link 3                    
Link 4                    
Link 5                    
Link 6                    

<p id="jumpBookmark"> </p>
Some very long text #1
Some very long text #2 
Some very long text #3 
Some very long text #4 
Some very long text #5 
Some very long text #6  

This is working fine. However, I do not want the user to face the links list, so I scroll down to the bookmark:

<script type="text/javascript">
    $(function () {
        // for small widths were actual content is put below the links, scrolling down
        window.setTimeout(function() {
            // this checks if view port is small enough to change the layout (navbar is hidden if small enough)
            if (!$("#myNavbar").is(":visible")) {
                $('html, body')
                    .animate({
                            // this also compensate the top navbar 
                            scrollTop: $("#jumpBookmark").offset().top - 90
                        },
                        500);
            }
        // this should be large enough to ensure that layout is "done"
        }, 500); 
    });
</script>

Without setTimeout with a fairly large amount, $("#myNavbar").is(":visible") will not return a correct value.

I have also tried using on as indicated here, but it does not seem to work:

    jQuery.fn.extend({
        live: function (event, callback) {
            if (this.selector) {
                jQuery(document).on(event, this.selector, callback);
            }
        }
    });

    // hookup the event
    $('#myNavbar').live("visible", function () {
        // this is never triggered
        alert("do something");
    });

Question: how can I perform the scrolling without waiting so long?

jQuery version is 2.2.4.

Thanks.