Keep element a set distance from top of browser screen without using CSS?
<p>I am using Bootstraps modals and so adding <code>position:fixed</code> doesnt work.</p>

<p>I have an arrow element pointing towards the modal triggering element. I want this arrow to point to the trigger wherever that trigger is on the screen.</p>

<p>I can do this easily enough with:</p>

<pre><code>$("[data-toggle='modal']").click(function() {
    triggerpos = $(this).offset().top;
    $('.modal-arrow').css('top', triggerpos + "px");
}); 
</code></pre>

<p>The problem is that if there is a long modal that causes the user to scroll, then the arrow doesn't stay fixed; it moves with the modal as the user scrolls.</p>

<p>See my fiddle: <a href="https://jsfiddle.net/umv4jhLg/22/" rel="nofollow">https://jsfiddle.net/umv4jhLg/22/</a></p>

<p>Of course I have tried various arrangements with CSS, but with no result.</p>

<p>I have also tried adjusting it on window scroll:</p>

<pre><code>$(window).scroll(function(){
  var triggerpos = $(this).offset().top;
    $('.modal-arrow').css('top', triggerpos + "px");  
})
</code></pre>

<p>but with no results.</p>

<p>Would anyone know of a way that I can keep the <code>.modal-arrow</code> steady using Jquery?</p>