-3

How can I change the backgraound colour to a solid colour, when I scroll? The color change must trigger when the user scolls in a smooth transition.

http://jsfiddle.net/6ranX/

<div class="sticky-nav">
</div>

.sticky-nav{
position: fixed;
width: 100%;
height: 60px;
background: rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
1

3 Answers 3

2

With jQuery you can trigger a class change on document scroll and change the color according to that class in CSS like this :

DEMO

jQuery :

$(document).ready(function () {
    $(window).scroll(function(){
        $('.sticky-nav').addClass('scrolled');
    });
});

CSS :

.sticky-nav.scrolled{
    background: gold;
}
3
  • Thats nice, but i want that the change starts no inmediatly, i want that starts when i had scroll 100px (for example) and that the change be smooth, like a fade. But thanks! Jul 18, 2014 at 10:18
  • @MarkLenders it would have bee nice to explain that in the question... but take a look at this : jsfiddle.net/webtiki/6ranX/3
    – web-tiki
    Jul 18, 2014 at 10:27
  • Thanks @web-tiki , but when I start to scroll, there is a flash while the color is changing, how can i solve thiS? Jul 18, 2014 at 10:31
1

Simply create two CSS classes. One for a solid background colour and one for a gradient. Then use the jQuery .scroll() event listener to toggle between the two CSS Classes.

1
  • i want that the change starts no inmediatly, i want that starts when i had scroll 100px (for example) and that the change be smooth, like a fade. Jul 18, 2014 at 10:19
0

look at this fiddle

in this code you can intercept start and end scroll (using jquery-throttle-debounce)

if the scrool is higher than 100px background becomes blue during scroll.

jquery

$(window).scroll($.debounce( 250, true, function(){
    $('#scrollMsg').html('SCROLLING');
    var height = $(window).scrollTop();

    if(height  > 100) {
        $('p').addClass('linear');
    }

} ) );
$(window).scroll($.debounce( 250, function(){
    $('#scrollMsg').html('FINISH');
    $('p').removeClass('linear');
} ) );

css

#scrollMsg{
 position:fixed;
 color: red;
 font-size: 20px; 
    background-color: white!important;
    padding:20px;
}
p{
    background: rgba(0,0,0,0.4);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.4)), color-stop(100%, rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.linear{
    background-color:blue;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.