CSS，JS或JQuery中是否有一种可以根据位置改变文本颜色的方法？

Question

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

A body background gradient, from their primary-color to white, from top to bottom, static.

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

I would like to comply with both of these, but, of course, headers don't always sit at the top of the page, especially if they are being used as sub-headers and section titles.

Does ANYONE know of a way in CSS, Javascript or jQuery that would allow the color of the text change depending on where it sits on the page, for example, at the top, the headers are white, to contrast the primary-color of the body gradient, but further down the page, the headers change to the primary-color to contrast the white of the body gradient?

Answer 1

You can try css3 filter "invert". It is not really a very good result by now, 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, though support isn't great (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're looking to do?

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

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