Actually what is the question! Interested in the implementation of changing the color of the background of the fixed header when scrolling! Being in a specific landing section (home / about / work /, etc.). How can this be implemented?

  • you hang up a scroll event, and at the point where you need to change the color itself - Oleksandr
  • So, now more! Is it possible to set an example? - Ididon

2 answers 2

Simplified way, if you do not have additional classes in the header

$(window).scroll(function(){ var currentclass $('section').each(function(){ if($(this).offset().top<$(window).scrollTop()){ currentclass =$(this).attr('id') } }) $('header').attr('class',currentclass) }) 
 header{ position:fixed; height:100px; width:100%; background:#ccc; } section{ height:700px; } .home{ background:red; } .about{ background:blue; } .contacts{ background:green; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header></header> <section id=home></section> <section id=about></section> <section id=contacts></section>

  • Fine! What you need is short and clear! Thank you all for your help! - Ididon

https://jsfiddle.net/rrtmmyj9/ Example of changing bg by the position of the screen and you need a block

 $(window).scroll(function () { $('.two').offset().top; if ($('.two').offset().top >= pageYOffset) { $('.two').css('background',"blue"); } })