Is there a way in CSS, JS, or jQuery that can change the color of text depending on position?

Question

I am a developer of a corporate website that has a design for a page that includes the following:

The background gradient of the body, from the primary color to white, from top to bottom, static.

The set color of the headers (h1, h2, h3, etc.) is set to white.

I would like to complete both of these questions, but of course the headings do not always sit at the top of the page, especially if they are used as headings for headings and sections.

Does ANYONE mean a way in CSS, Javascript or jQuery that allows you to change the color of the text depending on where it is on the page, for example, at the top, the headings are white to contrast with the main one, the color of the body gradient, but further down the page, the headings change to primary color to contrast with the white gradient of the body?

Answer 1

You can try the css3 invert filter. This is not a good result at the moment, but maybe you will play with it.

$(document).ready(function() { $("h2").each(function() { var offset = $(window).scrollTop() - $(this).position().top; var height = $(document).height(); var percent = (-offset * 100) / height; $(this).css({ 'filter': 'invert(' + percent + '%)' }) }); }); 

 body { background: #7cf1ff; background: -moz-linear-gradient(top, #7cf1ff 0%, #96a0e7 100%); background: -webkit-linear-gradient(top, #7cf1ff 0%, #96a0e7 100%); background: linear-gradient(to bottom, #7cf1ff 0%, #96a0e7 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7cf1ff', endColorstr='#96a0e7', GradientType=0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <h2>Headline</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

Answer 2

CSS mix-blend-mode does something similar to what you want, but keep it small (IE / Edge).

 html, body { margin: 0; padding: 0; background: linear-gradient(180deg, yellow 0%, green 100%); font-size: 0; height: 200%; } .outer { display: inline-block; width: 200px; height: 200px; font-family: sans-serif; font-size: 40px; line-height: 200px; text-align: center; font-weight: bold; } .inner { color: white; mix-blend-mode: difference; } .solid { background-color: navy; } .gradient-bw { background: linear-gradient(180deg, black 0%, white 100%); } .gradient-color { background: linear-gradient(180deg, navy 0%, orange 100%); } .fixed { position: fixed; padding: 20px; right: 0; bottom: 0; color: white; font-size: 40px; z-index: 2; mix-blend-mode: difference; } 

 <div class="outer solid"> <div class="inner"> Text! </div> </div> <div class="outer gradient-bw"> <div class="inner"> Text! </div> </div> <div class="outer gradient-color"> <div class="inner"> Text! </div> </div> <div class="fixed"> Text! </div> 

Answer 3

Does this work for what you want to do?

 $(window).on("scroll", function() { if($(window).scrollTop() > 150) { $(".header").addClass("activeOne"); } else { $(".header").removeClass("activeOne"); } }); 

http://jsfiddle.net/jdcutter/634d6vgq/129/