hameed hameed - 3 months ago 9
PHP Question

set background color of class while scrolling and also the class is must in fixed position

I need to change the background color of class(backwhitemarq) while scrolling and also the class backwhitemarq is must fixed position?

html code:

<div class="backwhitemarq">
/*i need to change the background color for this class.*/
<center> offer of the day</center>
</div>


css code:

.backwhitemarq
{
background-color: #f6e454;
padding: 3px;
border-radius: 3px;
height: 44px;
margin-top: 15px;
position:fixed; //fixed
width:100%;
z-index:100;
}
.spacewww /*another class for background color*/
{
background-color:green;
}


javascript code:

<script type="text/javascript">
$(window).scroll(function() /*scroll function for window*/
{
var speedscr =$('backwhitemarq'),
scroll = $(window).scrollTop();

if (scroll >= 10)
{
speedscr.addClass("spacewww");
} else
{
speedscr.removeClass("spacewww");
}
});
</script>

Answer

$(window).scroll(function()   /*scroll function for window*/
 {  
  var speedscr =$('.backwhitemarq');
     var scroll = $(window).scrollTop();

    if (scroll >= 10)
    {
       speedscr.addClass("spacewww");
    } else 
    {
        speedscr.removeClass("spacewww");
    }
 });
body{ height: 10000px; }
  .backwhitemarq
{
background-color: #f6e454;
padding: 3px;
border-radius: 3px;
height: 44px;
margin-top: 15px;
position:fixed;   //fixed
width:100%;
z-index:100;
}
.spacewww     /*another class for background color*/
{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="backwhitemarq">/*i need to change the background color for this class.*/
 <center> offer of the day</center>
  </div>

I think you forgot to add .(dot) in jquery selector

<script type="text/javascript"> 
$(window).scroll(function()   /*scroll function for window*/
 {  
  var speedscr =$('.backwhitemarq'),
     scroll = $(window).scrollTop();

    if (scroll >= 10)
    {
       speedscr.addClass("spacewww");
    } else 
    {
        speedscr.removeClass("spacewww");
    }
 });
  </script>