There is a fixed cap. When scrolling the site, the logo should apply the background color on which it is located. How can this be realized without the participation of Photoshop with a pre-holed header in the form of a logo?

    3 answers 3

    As an option, make a diva with a changing background in height, whether it's a picture, a gradient, whatever it is. Dimensions, position and coordinates set as at the logo, overflow: hidden . And then, when scrolling the page, scroll it with JS'om. A little Indian option, but I think it has a chance to live in the context of a sentence.

      I propose to determine the color of the block that is now on top and use the SVG- fill property to change the color of the logo in accordance with a specific color. If your logo is not in SVG format, then it will need to be inserted into the <svg></svg block as <image xlink:href=""> .

       var blockHeight = [], blockColor = [], blockTop = [], $svgPaths = $('svg path'); $(window).scroll(function() { blockArr = getBlocks(); for (var i = 0; i < blockTop.length; i++) { if (blockTop[i] <= 0 && -blockTop[i] <= blockHeight[i]) { $svgPaths.css('fill', blockColor[i]); } } }); function getBlocks() { $('.block').each(function(index) { blockHeight[index] = $(this).outerHeight(); blockTop[index] = this.getBoundingClientRect().top; blockColor[index] = $(this).css('background-color'); }); } 
       * { margin: 0; padding: 0; } .container { height: 1500px; } .container header { position: fixed; width: 100%; padding: 15px; background-color: #fff; } .block { height: 200px; } .block--red { background-color: red; } .block--green { background-color: green; } .block--yellow { background-color: yellow; } .block--blue { background-color: blue; } svg { width: 100px; margin: 0 auto; display: block; } svg path { fill: #239fff; } svg path.dot { fill: #f8db1e; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <header> <svg version="1.1" x="0px" y="0px" viewBox="0 190 250 80" xml:space="preserve"> <path class="letter" d="M17,231.7l10.7-13c0.8-0.9,0.3-2-0.8-2h-8c-0.8,0-1.5,0.3-2.2,1.1l-7.3,9.3v-8.7c0-1.2-0.6-1.7-1.7-1.7H1.7 c-1.1,0-1.7,0.6-1.7,1.7v30c0,1.2,0.6,1.7,1.7,1.7h5.9c1.1,0,1.7-0.6,1.7-1.7v-11.6l9.8,12.2c0.6,0.7,1.1,1.2,2,1.2h8.3 c1.1,0,1.5-1.2,0.9-1.9L17,231.7z"></path> <path class="letter" d="M181.4,216.8h-24.9c-0.8,0-1.4,0.6-1.4,1.4v6.5c0,0.8,0.6,1.4,1.4,1.4h7.9v22.7c0,0.8,0.6,1.4,1.4,1.4h6.5 c0.8,0,1.4-0.6,1.4-1.4v-22.7h7.8c0.8,0,1.4-0.6,1.4-1.4v-6.5C182.8,217.4,182.2,216.8,181.4,216.8"></path> <path class="letter" d="M107.7,242.7h-8v-6.3h8C112.6,236.5,113,242.7,107.7,242.7 M99.7,224.2h6c3.9,0,3.9,5.2,0,5.2h-6V224.2z M114.9,232c5.9-5.7,2-15.2-7.1-15.2H92.1c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h17.1 C121.2,250.2,124.3,236.5,114.9,232"></path> <path class="letter" d="M83.3,218.2c0-0.8-0.6-1.4-1.4-1.4h-7.4c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h7.4 c0.8,0,1.4-0.6,1.4-1.4V218.2z"></path> <path class="letter" d="M232.5,232.1h-5v-7.7h4.9c3.3,0,4.4,1.5,4.4,3.8C236.8,230.2,235.9,232.1,232.5,232.1 M233.2,216.8h-13.6 c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h6.5c0.8,0,1.4-0.6,1.4-1.4v-9h5.3c7.5,0,13.2-4,13.2-11.4 C246,221.3,240.1,216.8,233.2,216.8"></path> <path class="letter" d="M193.8,237.1l3.7-11l3.7,11H193.8z M215.1,248.6L203.7,218c-0.3-0.8-0.9-1.3-1.9-1.3h-8.6c-1,0-1.6,0.5-1.9,1.3 l-11.4,30.5c-0.3,0.9,0.2,1.7,1.1,1.7h7.3c0.6,0,1.2-0.5,1.4-1l1.5-4.5h12.6l1.5,4.5c0.2,0.6,0.8,1,1.4,1h7.3 C214.9,250.2,215.4,249.5,215.1,248.6"></path> <path class="letter" d="M65.9,248.8v-30.6c0-0.8-0.6-1.4-1.4-1.4h-7.1c-0.6,0-1,0.3-1.3,0.7l-13.2,17.9l0-17.2c0-0.8-0.6-1.4-1.4-1.4 H35c-0.8,0-1.4,0.6-1.4,1.4v30.6c0,0.8,0.6,1.4,1.4,1.4h7.1c0.6,0,1-0.3,1.3-0.7l13.2-17.9l0,17.2c0,0.8,0.6,1.4,1.4,1.4h6.5 C65.3,250.2,65.9,249.6,65.9,248.8L65.9,248.8z"></path> <path class="letter" d="M152.9,243.9l-3.8-4.1l0,0c-0.3-0.3-0.7-0.5-1.1-0.5c-0.4,0-0.7,0.2-1,0.4c-3.3,2.6-5.9,2.8-7.5,2.8 c-4.9,0-8.9-4-8.9-9c0-4.9,4-9,8.9-9c1.6,0,4.2,0.2,7.5,2.8c0.3,0.2,0.6,0.4,1,0.4c0.4,0,0.8-0.2,1.1-0.5h0l3.8-4.1v0 c0.2-0.3,0.4-0.6,0.4-1c0-0.4-0.2-0.8-0.4-1c-4.3-3.9-8.3-5.5-13.3-5.5c-9.8,0-17.8,7.9-17.8,17.8c0,9.9,8,17.9,17.8,17.9 c5,0,9-1.5,13.3-5.4v0c0.3-0.3,0.4-0.6,0.4-1C153.3,244.5,153.1,244.2,152.9,243.9L152.9,243.9z"></path> <path class="dot" d="M75.7,203.5c0,4.7-3.8,8.5-8.4,8.5c-4.6,0-8.4-3.8-8.4-8.5c0-4.7,3.8-8.5,8.4-8.5C72,195,75.7,198.8,75.7,203.5"></path> <path class="dot" d="M97.5,203.5c0,4.7-3.8,8.5-8.4,8.5c-4.6,0-8.4-3.8-8.4-8.5c0-4.7,3.8-8.5,8.4-8.5 C93.8,195,97.5,198.8,97.5,203.5"></path> </svg> </header> <div class="block block--red"></div> <div class="block block--blue"></div> <div class="block block--green"></div> <div class="block block--yellow"></div> </div>

        Perhaps the "leaky logo" is the easiest option. The remaining options smacks of those more perversions:

        If the background colors are constant (not dependent on the content), then you can manually match the desired colors with the corresponding window.pageYOffset values window.pageYOffset for example.

        Or determine which element is in the right part of the screen (I won’t tell you exactly how to do it) and read its background-color .