Изменение разности Div на прокрутке

-1

Прежде всего, пожалуйста, не кричите на меня, чтобы задать этот вопрос. Я знаю, что на этот счет уже есть миллион тем, и, к сожалению, я прочитал их все, и я ВСЕГДА не могу понять, что я делаю неправильно.Изменение разности Div на прокрутке

Я создал простой сайт, чтобы попытаться понять, как это работает, чтобы я мог реализовать его на более сложном сайте.

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

HTML-файла:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<head> 
    <title> </title> 
    <meta charset="utf-8"> 
    <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:300,400' rel='stylesheet' type='text/css'> 
    <script type="text/javascript" src="scripts/jquery-1.11.1.js"></script> 
    <script type="text/javascript" src="http://www.queness.com/js/bsa.js"></script> 
    <link rel="stylesheet" href="styles.css"> 



<script type="text/javascript"> 

$(document).ready(function() { 

    var colordivs = $('#fade div'); 

    $(document).scroll(function(e) { 
     var scrollPercent = ($(window).scrollTop()/$('#fade').outerHeight()) * 100; 

     if (scrollPercent > 0) { 
      if (scrollPercent < 33) { 
       var opacity = 1 - (scrollPercent/33); 
       $(colordivs[0]).css('opacity', opacity); 
      } 
      else if (scrollPercent > 66) { 
       var opacity = 1 - (scrollPercent/100); 
       $(colordivs[0]).css('opacity', 0); 
       $(colordivs[1]).css('opacity', 0); 
       $(colordivs[2]).css('opacity', opacity); 
      } 
      else if (scrollPercent > 33) { 
       var opacity = 1 - (scrollPercent/66); 
       $(colordivs[0]).css('opacity', 0); 
       $(colordivs[1]).css('opacity', opacity); 
      } 
     } 
    }); 

    }); 



</script>  
</head> 

<body> 
<div class="container"> 
    <div id="fade"> 
    </div> 
</div> 
</body> 
</html>

CSS-файл:

body { 
    background-color: #ffcc00; 
} 

.container { 
height: 6000px; 
width: 100%; 
margin: 0 auto; 

} 
#fade { 
background-image: url("skyline.png"); 
width: 100%; 
height: 600px; 
position: fixed; 
overflow: hidden: 
}

Так что я думаю, мой первый вопрос у меня есть все? Мне не хватает сценария jquery или что-то в этом роде. и во-вторых, имеет ли значение, где css-файл является таким же, как и связанный с ним в html-файле? Как я уже сказал, я не совсем понимаю, как работает изменяющаяся непрозрачность, если она имеет какое-либо отношение к файлу css.

Я полностью понимаю HTML и CSS, и я прекрасно понимаю, что происходит в скрипте, я просто не могу понять, почему они не разговаривают друг с другом и не вызывают изменений.

Заранее благодарим за любые указания!

источник

2014-06-12 itsmepetey

Изменить

var colordivs = $('#fade div');

var colordivs = $('#fade');

источник

2014-06-12 19:15:50 berrberr

спасибо! Я подумал, что я испортил что-то еще. – itsmepetey

Изменение разности Div на прокрутке

ответ

Смежные вопросы