Фиксация слова при скроле страницы

$(function() { 
 
        var $animate = $('.scroll-word-container li'); 
        var $window = $(window); 
 
        function check_if_in_view() { 
            var window_height = $window.height() / 2; 
            var window_top_position = $window.scrollTop(); 
            var window_bottom_position = (window_top_position + window_height); 
            var pos = $(".scroll-word-container li.active").position(); 
 
            $.each($animate, function() { 
                var $element = $(this); 
                var element_height = $element.outerHeight(); 
                var element_top_position = $element.offset().top; 
                var element_bottom_position = (element_top_position + element_height); 
                //check to see if this current container is within viewport 
                if ((element_bottom_position >= window_top_position) && 
                    (element_top_position <= window_bottom_position)) { 
                    $('.scroll-word-container li').removeClass('active'); 
                    $element.addClass('active'); 
                    $(".scroll-word").css({ 
                        "top": pos.top 
                    }); 
                    $('.scroll-word-container .one span').css({ 
                        "color":"rgba(199, 199, 199, 0.3)" 
                    }); 
                } else { 
                    $element.removeClass('active'); 
                    $(".scroll-word").css({ 
                        "top": pos.top 
                    }); 
                    if(element_top_position <= window_top_position) { 
                        $('.scroll-word-container li.five').addClass('active'); 
                    } 
                } 
            }); 
 
            $('.scroll-word-container .one.active span').css({ 
                "color":"#000" 
            }); 
        } 
 
        $window.on('scroll resize', check_if_in_view); 
        $window.trigger('scroll'); 
        $('.scroll-word-container .one span').css({ 
            "color":"#000" 
        }); 
    });

.discover-scroll-word-wrapper { 
	width: 100%; 
  padding: 50vh 0 200vh; 
	/*overflow: hidden;*/ 
} 
.scroll-content { 
	max-width: 245px; 
	margin: 0 auto -150px; 
	display: -webkit-box; 
	display: -moz-box; 
	display: -ms-flexbox; 
	display: -webkit-flex; 
	-webkit-flex-wrap: wrap; 
	flex-wrap: wrap; 
	display: flex; 
	-webkit-justify-content: center; 
	justify-content: center; 
	position: relative; 
} 
.scroll-word-container { 
	transform: translate(0%, 0%) !important; 
} 
#scroll-word-container { 
	max-width: 90%; 
	margin: 0 0 0 30px; 
	padding: 0; 
	text-align: center; 
} 
#scroll-word-container li { 
	display: block; 
	margin: 10px 0; 
	text-align: left; 
} 
#scroll-word-container span, 
.scroll-word { 
	font-family: 'Libre Baskerville', serif; 
	font-size: 30px; 
	font-weight: 400; 
	line-height: 40px; 
	-webkit-transition: all .3s ease-in-out .2s; 
	transition: all .3s ease-in-out .2s; 
 
} 
.discover-scroll-word-wrapper li span { 
	color: rgba(199, 199, 199, 0.3); 
} 
.scroll-word-container .one span, 
.one.active span, 
.two.active span, 
.three.active span, 
.four.active span, 
.five.active span { 
	color: #000; 
} 
.scroll-word { 
	position: absolute; 
	left: 0; 
	top: 0; 
	margin: 10px 0; 
	-webkit-transition: .3s ease-in-out; 
	transition: .3s ease-in-out; 
	color: #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="discover-scroll-word-wrapper"> 
    <div class="scroll-content"> 
        <span class="scroll-word">be</span> 
        <ul class="scroll-word-container one-active" id="scroll-word-container"> 
            <li class="one" > 
                <span>curious.</span> 
            </li> 
            <li class="two "> 
                <span>loving.</span> 
            </li> 
            <li class="three"> 
                <span>thoughtful.</span> 
            </li> 
            <li class="four"> 
                <span>inspired.</span> 
            </li> 
            <li class="five"> 
                <span>you.</span> 
            </li> 
        </ul> 
    </div> 
</div>