文本环绕<span>固定时跳转

Question

寻找这个问题的CSS或JavaScript解决方案。我正在使用ScrollMagic将一些文本固定到浏览器窗口，如下所示：

http://codepen.io/anon/pen/GJrZJx

问题是，当固定文本被固定和取消固定时，右边的跨度会跳转。我正在尝试将固定文本的右侧（#right-span）设置为固定文本固定/取消固定时保持原位。

这是描述预期行为的图像：

有关如何将跨度保持在原始位置的任何想法吗？

HTML：

<span id="name-font" style="font-weight: 800; color:red;">PIN THIS TEXT BUT KEEP THE SPACING OF THE TEXT IN THIS RIGHT SPAN --></span>
<span id="right-span"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam finibus nisi nisl, etc. </span>

JS：

        var controller = new ScrollMagic.Controller();
        var sceneNameFont = new ScrollMagic.Scene({
            triggerElement: "#name-font",
            triggerHook: 0
        })
        .setPin("#name-font")
        .setVelocity("#name-font", {color: '#0000FF'}, {duration: 500})
        .addTo(controller);