Изменить CSS Squarespace при прокрутке

Я пытаюсь изменить цвет фона элемента заголовка на моем сайте Squarespace с помощью пользовательского CSS и инъекции кода.

Я нашел этот предыдущий, не-Squarespace решение.

Я попытался адаптировать его, но, учитывая отсутствие у меня знаний о jQuery и то, как именно Squarespace использует инъекцию кода, я в растерянности.

В пользовательской области CSS я добавил

.transparent-header #header { background-color: rgba(0,0,0,0.7); }

В области ввода кода я добавил

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">

$(window).on('scroll',function(){

    if ($(window).scrollTop() >= 100) {
        $('.transparent-header #header').css({
            'background-color:' : 'rgba(0,0,0,0.7)'
        });
    } else {
        $('.transparent-header #header').css({
            'background-color:' : 'rgba(0,0,0,0.0)'
        });
    }
});
</script>

На главную страницу нашего веб-сайта можно перейти здесь.

Редактировать:

Ожидаемый результат: после прокрутки на некоторое расстояние x (в настоящее время 100 пикселей) заголовок навигации добавит полупрозрачную заливку.

Текущий результат: без изменений


javascript jquery css squarespace
person regularGuy    schedule 31.05.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Ваш код будет работать, просто избавьтесь от двоеточий после селекторов цвета фона. http://screencast.com/t/qfNoKpSwaRui

person Vcasso    schedule 31.05.2016
comment
Это сработало. Также обновлена ​​ссылка на jQuery до самой последней версии. - person regularGuy; 31.05.2016

arrow_upward
0
arrow_downward

Я бы, вероятно, справился с этим немного по-другому в Squarespace, используя ту же идею, чтобы очистить ваш код, освободить некоторые ненужные методы и сохранить код в чистоте.

Используйте модификатор класса CSS, затем используйте jQuery для добавления/удаления класса. Таким образом, вам не нужно использовать CSS-методы jQuery.

Добавьте этот пользовательский CSS в Squarespace:

#header {
    background-color: rgba(0,0,0,0.0);
    transition: background-color 200ms ease;
    &.is-scrolled {
        background-color: rgba(0,0,0,0.7);
    }
}

Как вы можете видеть выше, состояние по умолчанию будет прозрачным. Когда мы прокручиваем вниз, мы хотим добавить модификатор класса CSS, .is-scrolled, который затем добавляет новый CSS. Чтобы добавить/удалить класс, мы можем просто изменить ваш JavaScript.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
    $(window).on("scroll",function(){
        var header = $("#header");

        if ($(window).scrollTop() >= 100) {
            header.addClass("is-scrolled");
        } else {
            header.removeClass("is-scrolled");
        }
    });
</script>
person jasonbarone    schedule 04.06.2016

arrow_upward
0
arrow_downward

Измените цвет фона конкретной страницы (а не только заголовка) при прокрутке пользователем, например, измените это:

.transparent-header #header {
    background-color: rgba(0,0,0,0.7);
}

to

.transparent-background #collectionIDgoeshere { 
    background-color: rgba(0,0,0,0.7); 
}
person Eric Brodzinski    schedule 29.03.2017