0

Нужно было вынести 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>

11
  • а зачем меняли синтаксис, когда переносили?
    – ThisMan
    Commented 18 сент. 2018 в 16:12
  • первая строка выглядела так var nav = $(".header"); и получаем сразу ошибку "Uncaught ReferenceError: $ is not defined"
    – Lazy Joe
    Commented 18 сент. 2018 в 16:15
  • ну так правильно, использовалась библиотека, которую вы выкинули. Надо не синтаксис менять, а библиотеку подключить
    – ThisMan
    Commented 18 сент. 2018 в 16:17
  • @ThisMan то есть того, что она подключена в сам HTML мало?
    – Lazy Joe
    Commented 18 сент. 2018 в 16:20
  • Не function({...}), а function(){...}
    – andreymal
    Commented 18 сент. 2018 в 16:20

1 ответ 1

1

Смотрите, все очень просто делается в вашем случае.

1 - на странице подключаете jQuery, через

<script src='path/to/jquery'></script>

2 - берет ваш скрипт и НЕ МЕНЯЯ переносите в отдельный файл

3 - подключаете этот файл, так же как и jQuery

<script src='path/to/jquery'></script>
<script src='path/to/file.js'></script>

На крайняк, можете оберунуть ваш скрипт в

$( document ).ready(function() {
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'});
});
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.