0

I would like to create a fixed element that changes color based on the underlying background via jquery but it doesn't work, can you tell me why?

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#content").scroll(function(){
    if( $(".sfondo").css('background-color') == 'black' {
       $("#fixed").css('background-color', 'grey');
    }) else if($(".sfondo").css('background-color') == 'grey' {
       $("#fixed").css('background-color', 'black');
  });
});
</script>

<style>
#fixed{width:50px; height:50px; background-color: grey; position: fixed; left: 50%; right: 50%; top: 5%;}
#primo{width: 100%; height: 200px; background-color: black;margin-bottom: 100px;margin-top: 200px;}
#secondo{width: 100%; height: 200px; background-color: grey;margin-bottom: 100px;}
#terzo{width: 100%; height: 200px; background-color: black;margin-bottom: 100px;}
#quarto{width: 100%; height: 200px; background-color: grey;margin-bottom: 700px;}
</style>
</head>
<body>

<div id="content">
<div id="fixed"></div>
<p class="sfondo" id="primo"></p>
<p class="sfondo" id="secondo"></p>
<p class="sfondo" id="terzo"></p>
<p class="sfondo" id="quarto"></p>
</div>

</body>
</html>
Adrian Vatavu
  • 1
  • Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors: your syntax is invalid. – Sebastian Simon May 31 '21 at 11:54
  • There are multiple issues here. For starters provide a more detailed explanation of the expected behavior you are looking for. Important to know that `scroll` will fire many times while scrolling and you are only comparing the first `.sfondo` and browser will never return a named color, it will return an RGB value regardless of how you set the color in css – charlietfl May 31 '21 at 11:54
  • Checking CSS properties directly is [best avoided](/q/55071684/4642212), especially for color values. Instead, a CSS class should be used, e.g. `.sfondo.black { background-color: black; } .sfondo { background-color: gray; }`; then [`.classList.has("black")`](//developer.mozilla.org/en-US/docs/Web/API/Element/classList) to check for its existence, `.classList.toggle("black")` for toggling the class, etc. It looks like you’re creating a [scroll-linked effect](//firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html). Explain your expected result and find a better alternative. – Sebastian Simon May 31 '21 at 11:57
  • Sebastiano, i like toggle the background of div in base of background of the body element... when i scroll i like on grey bg body the fixed div became black and the other way around. you can explain the reasoning you have suggested that interests me. – Adrian Vatavu Jun 01 '21 at 13:56

1 Answers1

0

I think you are missing brackets in your JQuery code. Try putting this as your if - else if statements:

if( $(".sfondo").css('background-color') == 'black') { $("#fixed").css('background-color', 'grey'); } else if($(".sfondo").css('background-color') == 'grey') { $("#fixed").css('background-color', 'black'); }

Angel Adam
  • 11