Прокрутка содержимого сайта через исчезающий заголовок

0

Попытка сделать это на моем сайте; содержимое прокручивается по заголовку, когда изображение заголовка исчезает (конечно, я хочу, чтобы изображение заголовка отображалось снова, возвращаясь вверху страницы). Мне удалось сделать это с помощью Javascript;

<script>
var divs = $('.head');
$(window).scroll(function () {
    if ($(window).scrollTop() < 20) {
        divs.stop(true, true).fadeIn("slow");
    } else {
        divs.stop(true, true).fadeOut("slow");
    }
});         
</script>

Этот сценарий просто заставляет мое изображение уходить с одним прокруткой - я хотел бы иметь как минимум 3 разных уровня непрозрачности, прежде чем мой образ полностью исчезнет. И в то же время контент прокручивается по изображению (позиция изображения: фиксированная). Могу ли я сделать это с помощью этого скрипта? Или мне нужно использовать CSS -trick (с непрозрачностью) для этого?

-

Хорошо, так вот мы теперь (Спасибо Козерогу!):

        <script>
            var div = $('.head');
            $(window).scroll(function(){
               if($(window).scrollTop()>10) {
                     div.stop(true,true).fadeTo("slow", 0.75);
               } if($(window).scrollTop()>150){
                     div.stop(true,true).fadeTo("slow", 0.4);
               } if($(window).scrollTop()>200){
                 div.stop(true,true).fadeTo("slow", 0);
               }
            });
        </script>

Мне удалось убрать изображение заголовка с помощью 3 свитков. Но у меня появилось три новые проблемы. Мое изображение продолжает мигать (от непрозрачности от 0.4 до 0), прокручивая ниже 200 пикселей, и я не могу понять, как я должен добавить это в свой скрипт (да, новый с Java). А также, когда я прокручиваю назад, мое изображение остается на непрозрачности 0,75 (нужно вернуть его без прозрачности = 1).

Кроме того, проблема с CSS или Javascript заключается в том, что при прокрутке содержимого содержимое не заменяет заголовок, и они там одновременно. Как и в случае с этим скриптом, он меняет непрозрачность и только с fadeTo ("slow", 0); -option мой контент показан отлично.

Теги:
fadein
fadeout

2 ответа

0

Вы можете сделать это с помощью вашего текущего скрипта.

Добавьте еще две ветки для разных позиций прокрутки, например scrollTop() <50 и scrollTop() <80, и вместо того, чтобы затухать в или из заголовка полностью использовать функцию jQuery fadeTo.

  • 0
    Большое спасибо! Я в новинку с Javascript, так что вы могли бы помочь мне с моей парой новых проблем (отредактировал оригинальный пост)?
0

Попробуйте установить длительность в числах.

fadeOut(2000)

API

Ещё вопросы

Сообщество Overcoder
Наверх
Меню