Нужно было вынести JS скрипт из HTML <script>
в отдельный файл (конечно же синтаксис был другой), но я получил ошибку Uncaught SyntaxError: Unexpected token else и ещё попутно Uncaught SyntaxError: Unexpected token >
var nav = document.getElementsByClassName("header").className;
var navText= document.getElementsByClassName("cd-headline").className;
var container =document.getElementsByClassName("container").className;
var top = document.getElementsByClassName("container").scrollTop;
container.onScroll, function({
if ( top > 150 ){
nav.css({backgroundColor:'rgba(0, 0, 0, 1)', height: '50px'});
navText.css({opacity: '0', marginTop: '-2em'});
} else if ( top < 149 )
{
nav.css({backgroundColor:'rgba(223, 0 ,79, 0.8)', height: '130px'});
navText.css({opacity: '1', marginTop: '0.7em'});
}
});
То есть при скролле блока container должны меняться css свойства объектов класса header и cd-headline
В JS я не особо силён, по этому решить самостоятельно не получилось.
До переноса код был следующим
<script type="text/javascript">
var nav = $(".header");
var navText=$(".cd-headline");
$('.container').on('scroll', function(){
// console.log("12515y1951u");
var top = $('.container').scrollTop();
if ( top > 150 ) {
nav.css({backgroundColor:'rgba(0, 0, 0, 1)', height: '50px'});
navText.css({opacity: '0', marginTop: '-2em'});
} else if ( top <= 150 ){
nav.css({backgroundColor:'rgba(223, 0 ,79, 0.8)', height: '130px'});
navText.css({opacity: '1', marginTop: '0.7em'});
});
</script>
function({...})
, аfunction(){...}