!!!! Изменение цвета при скролле SOS!!!
В общем вся проблема в том что скрипт некорректно работает во время скролла
т.е во время скролла цвета блоков не меняются а вся идея в том чтобы цвета плавно менялись во время скроллинга http://learn.javascript.ru/play/EGRaKb
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="admin" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<title>Untitled - 1</title>
<style>
.active{
}
dbody {
min-height: 750px;
}
.body div{
display: block;
text-align: center;
border: 10px solid #000;
height: 250px;
width: 70%;
padding-top: 200px;
}
.menu{
position: fixed;
right: 20px;
top: 20px;
border: 2px solid #000;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#1">11111</a></li>
<li><a href="#2">22222</a></li>
<li><a href="#3">33333</a></li>
<li><a href="#4">44444</a></li>
<li><a href="#5">55555</a></li>
<li><a href="#6">66666</a></li>
</ul>
<div class="body">
<a name="1" ></a><br /><div id="f1">1</div>
<a name="2" ></a><br /><div id="f2">2</div>
<a name="3" ></a><br /><div id="f3">3</div>
<a name="4" ></a><br /><div id="f4">4</div>
<a name="5" ></a><br /><div id="f5">5</div>
<a name="6" ></a><br /><div id="f6">6</div>
</div>
<script>
$(document).ready(function(){
var link = window.location.hash.replace("#","");
$('.body a[name="'+link+'"]').next().next().addClass('active');
$('.menu a').click(function(){
var _name = $(this).attr("href");
document.location.href = _name;
location.reload();
});});
$(function() {
$(window).scroll(function(){
var distanceTop1 = $('#f1').offset().top - 450;
var distanceTop2 = $('#f2').offset().top - 450;
var distanceTop3 = $('#f3').offset().top - 450;
var distanceTop4 = $('#f4').offset().top - 450;
var distanceTop5 = $('#f5').offset().top - 450;
var distanceTop6 = $('#f6').offset().top - 450;
if ($(window).scrollTop() > distanceTop1){
$('#f2,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f1').animate({ backgroundColor: "green"}, 500);}
else
$('#f1').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop2){
$('#f1,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f2').animate({ backgroundColor: "green"}, 500);}
else
$('#f2').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop3){
$('#f2,#f1,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f3').animate({ backgroundColor: "green"}, 500);}
else
$('#f3').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop4){
$('#f2,#f3,#f1,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f4').animate({ backgroundColor: "green"}, 500);}
else
$('#f4').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop5){
$('#f2,#f3,#f4,#f1,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f5').animate({ backgroundColor: "green"}, 500);}
else
$('#f5').stop(true).animate({ backgroundColor: "none" }, 500);
if ($(window).scrollTop() > distanceTop6) {
$('#f2,#f3,#f4,#f5,#f1').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f6').animate({ backgroundColor: "green"}, 500);
}
else
$('#f6').stop(true).animate({ backgroundColor: "none" }, 500);
});
});
</script>
</body>
</html>
ПОМОГИТЕ!!! :help: |
:help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help: :help:
|
Чет там кода слишком много. Удали дубли, а то вломы разбираться..
|
danik.js,
В принципе весь код слизан отсюда http://dnzl.ru/view_post.php?id=188 Только вот это сам кое-как нацарапал (ну почти сам) и с этим кодом вроде бы проблем нет
$(document).ready(function () {
var link = window.location.hash.replace("#", "");
$('.body a[name="' + link + '"]').next().next().addClass('active');
$('.menu a').click(function () {
var _name = $(this).attr("href");
document.location.href = _name;
location.reload();
});
});
Без дублей
$(function () {
$(window).scroll(function () {
var distanceTop1 = $('#f1').offset().top - 450;
if ($(window).scrollTop() > distanceTop1) {
$('#f1').animate({
backgroundColor: "green"
}, 500);
} else $('#f1').stop(true).animate({
backgroundColor: "none"
}, 500);
});
});
|
а в логи ошибки валятся?
или может условие не выполняется.. выведите в консоль результаты при скроле:
...
var distanceTop1 = $('#f1').offset().top - 450;
console.log(distanceTop1);
console.log(($(window).scrollTop() > distanceTop1) ? 'условие выполнилось' : 'условие не выполнилось');
if ($(window).scrollTop() > distanceTop1) {
...
|
В принципе всё работает только надо было чтобы цвета блоков менялись при скроллинге а не только после его остановки
(в логах ошибок нет) |
Может есть какая-то библиотека jq?
|
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style>
dbody {
min-height: 750px;
}
div {
text-align: center;
border: solid 1px lightgreen;
width: 80%;
height: 200px;
margin: 2em;
}
</style>
<div class="f">1</div>
<div class="f">2</div>
<div class="f">3</div>
<div class="f">4</div>
<div class="f">5</div>
<div class="f">6</div>
<script>
jQuery(function ($) {
$(window).scroll(function(){
$(".f").each(function() {
if ($(this).offset().top < $(window).scrollTop() + 50) {
$(this).animate({backgroundColor: "green"}, 200);
} else {
$(this).animate({backgroundColor: "none"}, 200);
}
});
});
});
</script>
ну и подумай как это использовать, чтобы не было each |
http://www.xiper.net/examples/js-plu...lor/color.html
вот пример. но вот почему то jquery.color.js с jquery-1.10.1.min.js дружить не хочет.. |
Огромное спасибо за то что потрудились написать скрипт, однако надобно чтобы когда блок в центре экрана он окрашивался а у других цвет изчезал
(всё это дело для интернет магазина, для страницы представления товаров) Вот уже целый день бьюсь головой об стену:( ссори за то что не объяснил суть проблемы |
| Часовой пояс GMT +3, время: 10:02. |