6
\$\begingroup\$

I want to change the background color of each section of the page when the user scrolls. The code works but I feel like it's too inefficient

var colors = ['blue','yellow','green','purple','brown'];
var myScope;
var sections = [$('#section1'),$('#section2'),$('#section3'),$('#section4'),$('#section5')];
var sectionTop = [$('#section1').offset().top, $('#section2').offset().top, $('#section3').offset().top, $('#section4').offset().top, $('#section5').offset().top];
var zeus;

$(window).scroll(function () {
myScope = $(window).scrollTop() + 300;

    if (myScope >= sectionTop[0]  && myScope < sectionTop[1]) {
    sections[0].css('background-color', colors[0]);
    } else {
    sections[0].css('background-color', 'white');
    };

    if (myScope >= sectionTop[1]  && myScope < sectionTop[2]) {
    sections[1].css('background-color', colors[1]);
    } else {
    sections[1].css('background-color', 'white');
    };

    if (myScope >= sectionTop[2]  && myScope < sectionTop[3]) {
    sections[2].css('background-color', colors[2]);
    } else {
    sections[2].css('background-color', 'white');
    };

    if (myScope >= sectionTop[3]  && myScope < sectionTop[4]) {
    sections[3].css('background-color', colors[3]);
    } else {
    sections[3].css('background-color', 'white');
    };

    if (myScope >= sectionTop[4] ) {
    sections[4].css('background-color', colors[4]);
    } else {
    sections[4].css('background-color', 'white');
    };

});

I also tried to replace all those "if" with a "for" loop but it doesn't work, it doesn't pop any errors or anything, it just doesn't work.

for (var i = 0; i < sections.length-1; i++) {
        var j = i++;
        if (myScope >= sectionTop[i] && myScope < sectionTop[j]) {
        sections[i].css('background-color', colors[i]);
        } else {
        sections[i].css('background-color', 'white');
        };
    };
\$\endgroup\$

migrated from stackoverflow.com Aug 11 '16 at 12:06

This question came from our site for professional and enthusiast programmers.

  • \$\begingroup\$ Why do you need to change to color when scrolling? Can't you set it in advance? \$\endgroup\$ – Alon Eitan Jul 17 '16 at 21:19
  • \$\begingroup\$ I saw it on a website and thought it looked great so I wanted to try it. It also had a transition effect that I haven't added yet. \$\endgroup\$ – Esteban Jul 17 '16 at 21:22
  • \$\begingroup\$ for selecting all the elements with an id that starts with section you can use $('[id^="section"]') \$\endgroup\$ – maioman Jul 17 '16 at 21:33
  • \$\begingroup\$ I came here to run your code but I couldn't . It would have been helpful to have some HTML to visualise what you are trying to achieve. FYI, Twitter bootstrap has a scrollspy plugin that achieves what I think you are aiming for w3schools.com/bootstrap/bootstrap_scrollspy.asp \$\endgroup\$ – Siobhan Aug 19 '16 at 22:30
1
\$\begingroup\$

Heres your code slimmed down, the problem you were having with the loop was that you weren't getting offset().top of your sectionTop[i].

var myScope = zeus = false;
var colors = ['blue','yellow','green','purple','brown'];
var sectionId = '#section';
var sections = 5;

$(window).on('scroll', function() {
myScope = $(window).scrollTop() + 300;

for (var i = sections; i >= 0; i--) {
   var sid = i > 0 ? i : 1;
   var css = 'white';
   if(myScope >= $(sectionId + sid).offset().top 
   && myScope < $(sectionId + sid).offset().top) {
    css = colors[i];
   }

   $(sectionId + sid).css('background-color', css);
}

});
\$\endgroup\$
  • \$\begingroup\$ At least only read $(sectionId + sid).offset().top once \$\endgroup\$ – Jamiec Jul 29 '16 at 16:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy