JQuery изменить фоновый цвет пользователя прокрутки - PullRequest
Новая
       47

JQuery изменить фоновый цвет пользователя прокрутки

7 голосов
/ 06 января 2012

Возможно ли с помощью jquery, когда пользователь прокручивает страницу вниз, при этом фон анимируется с 50% белого до 90% белого или чего-то?

Итак, сначала это цвет rgba(255,255,255,.5), а когда пользовательвыделите 210px ниже цвета become rgba(255,255,255,.9).

Ответы [ 6 ]

26 голосов
/ 06 января 2012

Обновленная, более общая версия: 

var tStart = 100 // Start transition 100px from top
  , tEnd = 500   // End at 500px
  , cStart = [250, 195, 56]  // Gold
  , cEnd = [179, 217, 112]   // Lime
  , cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]];

$(document).ready(function(){
    $(document).scroll(function() {
        var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
        p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
        var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
        $("body").css('background-color', 'rgb(' + cBg.join(',') +')');
    });
});

В действии

Если вы хотите плавное, постепенное изменение при прокрутке, попробуйте 

$(document).ready(function(){
    $(document).scroll(function() {
        var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
        var channel = Math.round(alpha * 255);
        $("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')');
    });
});

JSFiddle

23 голосов
/ 06 января 2012

здесь (вы измените цвет страницы на синий при прокрутке более 210 пикселей и вернется к красному, если вы вернетесь вверх): 

$(document).ready(function(){       
            var scroll_pos = 0;
            $(document).scroll(function() { 
                scroll_pos = $(this).scrollTop();
                if(scroll_pos > 210) {
                    $("body").css('background-color', 'blue');
                } else {
                    $("body").css('background-color', 'red');
                }
            });
        });
3 голосов
/ 24 июня 2015

Для эффекта плавного перехода вы должны проверить положение прокрутки, соответственно вы можете изменить bg-цвет. используйте .animate функцию jquery. 

I found the perfect what I was looking for here

http://jsfiddle.net/cgspicer/V4qh9/

2 голосов
/ 06 января 2012

с помощью @ redmoon7777

css 

body{ height:5000px; }
.fifty { background:rgba(25,20,25,.5) }
.ninty {  background:rgba(25,20,25,.9) }

jQuery 

 $(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 210) {
                $("body").removeClass().addClass('ninty');
            } else {
                $("body").removeClass('ninty').addClass('fifty');
            }
        });
    });

DEMO

0 голосов
/ 21 февраля 2019

Вот ответ, который взят из учебника W3, javascript. 

 window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 420 || document.documentElement.scrollTop > 420) {
document.getElementById("navigationBar").style.background = "#2E5894";

} else {
   document.getElementById("navigationBar").style.background = "transparent";

}
}

Это меняет конкретный идентификатор, для меня моя панель навигации. Для простых переходов, добавьте это к вашему CSS, в этом случае под «id» навигационной панели (наряду с другими спецификациями, которые вам нравятся). 

 #navigationBar{
/*my header bar, no need to follow this*/
overflow: hidden;
color: white;*/
width:100%;
position: fixed;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
 transition: all ease-out .5s;
 }

Это даст вам полосу, которая постепенно меняет цвет после 420 пикселей.

0 голосов
/ 06 января 2012

с анимацией 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--for RGBA support. http://pioupioum.fr/sandbox/jquery-color/ -->
<script type="text/javascript" src="https://raw.github.com/piouPiouM/jquery-color/master/jquery.color.js"></script> 
<!--the magic -->
<script type="text/javascript">
$(document).ready(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() > 210)
            $('#bk').animate({backgroundColor: 'rgba(255,255,255,.9)'}, 1000);
    });
});
</script>
</head>
<body style="background: black">
<div id="bk" style="background-color: rgba(255,255,255,.5); height: 200%; min-height: 400px">
<!--change this element's background transparency instead of body so that you will see the effect -->
</div>
</body>
</html>
...