动态文本移动其他文本

Question

好的，所以我知道这可能很简单，但我有这样的大脑放屁......我有一个带有文本的div，里面有一个动态文本，它会发生变化。问题是当文本发生变化时，它正在移动我的其他文本。我已经尝试将其固定...修复问题，然而，稍后当我添加更多涉及滚动的内容时，我知道固定文本将保留在整个滚动....所以我＆＃ 39;我试图获得固定提供的相同的东西，但允许它滚动。这是一些代码：

如果我将dynamicText更改为position：fixed;然后左边的一切都保持不变......但我想我应该采用不同的方式，但不知道如何。提前致谢

HTML：

<div class="message">
            Hi, my name is <span class="title">Carine.</span> I'm a 
            <span class="title dynamicText"> Web Developer.</span>
</div>

CSS：

.message {
    font-size: 1em;
    margin: 3% auto;
}
.title {
    font-family: 'Over the Rainbow', cursive, sans-serif;
    font-size: 1.1em;
}
.dynamicText {
    opacity: 1;
    -webkit-transition: opacity 550ms ease;  
    -moz-transition: opacity 550ms ease;
    -o-transition: opacity 550ms ease;
    transition: opacity 550ms ease;
}

.dynamicTextOff {
    opacity: 0;
}

JS：

window.onload = function() {
    runSkills();
}

runSkills = function() {
var array = [
    "Graphic Designer.",
    "UX Designer.",
    "Photographer.",
    "Consultant.",
    "Artist.",
    "Jill of all Trades."
];

var i = -1;
var dyText = $(".dynamicText:last");
var interval = setInterval(function() {
    i++;
    dyText.text(array[i]);
    if(i == array.length-1)
        i = -1;
}, 3100);

var innerInt = setInterval(function() {
    dyText.toggleClass('dynamicTextOff');
}, 1550);
}