HOME / BLOG / BLOG-POST

How to change scroller color according to background ?

Change scroller color according to background

//decode and use this code according to ur demand 

function handleDarkSectionColors() {
        var section = $('.clb__dark_section, .clb__light_section');
        var sectionClass;


        if (section.length) {
            var scrollTop = $('.clb-scroll-top');
            var socialLinks = $('.clb-social');
            var fixedSearch = $('.search-global.fixed .ion');
            var self_window;


            $(window).on('scroll', function(){
                self_window = $(this);
                activeSection(self_window);
            });
function activeSection(self_window) { 
            var st = self_window.scrollTop() + self_window.height() / 2;
  section.each(function(){
         var sectionOffset = $(this).offset().top ;
                    var currentSection = $(this);
                    if (currentSection.hasClass('clb__dark_section')) {
        sectionClass = 'light-typo'
                    } else if(currentSection.hasClass('clb__light_section')) {
                        sectionClass = 'dark-typo';
                    }


                    if (sectionOffset + currentSection.height() > st && st > sectionOffset) {
                        scrollTop.addClass(sectionClass);
                        socialLinks.addClass(sectionClass);
                        fixedSearch.addClass(sectionClass);
                        return false;
                    } else {
                        scrollTop.removeClass(sectionClass);
                        socialLinks.removeClass(sectionClass);
                        fixedSearch.removeClass(sectionClass);
                    }
                });
            }
        }
    } 

 


about authors

Sandip Das

Web Developer

Once a legend said “Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler.



POST COMMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *