Попытка сделать это на моем сайте; содержимое прокручивается по заголовку, когда изображение заголовка исчезает (конечно, я хочу, чтобы изображение заголовка отображалось снова, возвращаясь вверху страницы). Мне удалось сделать это с помощью 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 мой контент показан отлично.
Вы можете сделать это с помощью вашего текущего скрипта.
Добавьте еще две ветки для разных позиций прокрутки, например scrollTop() <50 и scrollTop() <80, и вместо того, чтобы затухать в или из заголовка полностью использовать функцию jQuery fadeTo.