ozrabal

CSS background change on scroll

Fixed element appears to change color when entering different sections. Uses duplicated elements for every section.

Now with blend-mode magic for added effect.

Inspired by Marco Fugaro's Pen Changing color when hover another section.

A Pen by Giana on CodePen.

ozrabal

NrrRQy

A Pen by Piotr Łepkowski on CodePen.

License.

ozrabal

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

ozrabal

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image: url('http://cs412624.vk.me/v412624691/4117/RWBNZL6CLtU.jpg')"></div>      
    </div>
    <div class="swiper-slide">
      <div class="slide-inner" style="background-image: url('http://cs412624.vk.me/v412624691/41ad/atM6w55Z9Xg.jpg')"></div>
    </div>
    <div class="swiper-slide">

ozrabal

<?php 
add_filter( 'nav_menu_css_class', 'pwp_cpt_current_item_class', 10, 2 );
function pwp_cpt_current_item_class( $classes , $item ){

  $type = get_post_type_object(get_post_type());

  if(!empty($type->rewrite['slug'])) {

    if (get_post_type() == $type->name || is_archive($type->rewrite['slug'])) {
      $classes = str_replace('current_page_parent', '', $classes);

ozrabal

var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
    hasClass = function (el, className) { return el.classList.contains(className); };
    addClass = function (el, className) { el.classList.add(className); };
    removeClass = function (el, className) { el.classList.remove(className); };
} else {
    hasClass = function (el, className) {
        return new RegExp('\\b'+ className+'\\b').test(el.className);
    };
    addClass = function (el, className) {

ozrabal

AA.inView = (function(){

    function visibleY(el){
        var rect = el.getBoundingClientRect(),
            top = rect.top,
            height = rect.height,
            el = el.parentNode;
        do {
            rect = el.getBoundingClientRect();
            if (top <= rect.bottom === false) return false;

ozrabal

calculateTotal(){
        let c;
        c = this.state.others.map((item) => {
            if(item.spendingAmmount) {
                return parseInt(item.spendingAmmount)
            }
            return 0;
        });
        let total = 0;
        if(c.length) {

ozrabal

function splitTable(table, maxHeight) {
            var header = table.children("thead");
            var footer = table.children("tfoot");
            if (!header.length)
                return;
            var headerHeight = header.outerHeight();
            var header = header.detach();
            var splitIndices = [0];
            var rows = table.children("tbody").children();
            maxHeight -= headerHeight;

ozrabal

function splitTable(maxHeight) {
    var selector = null
    var brief201 = document.querySelector('.print-padding.brief201')
    if (brief201) {
        selector = '#brief201section10'
    }
    if (!selector) {
        return
    }
    var table = document.querySelector(selector)