How to write a do while loop in jquery

Question

I'm trying to get a variable to have a set color until a certain scroll distance down the page has been reached, once it reaches that point I want the variable to stop being that color and revert to normal settings. Once I scroll back up the page, I don't want the color to return. My first thought is the JavaScript do while loop but I'm unsure if that is the best way or even how to do it in jquery.

So far this is what I have

if($('body').hasClass('page-template-homepage-php')){
    var oneShot = jQuery(window).scrollTop()
    var opacity = jQuery(window).scrollTop() / 100;
     if(opacity > 1){ opacity = 1; }
    //do{
    //  opacity = 1;} while(
    //      oneShot < 201);
    $('.background-wrapper').css('background-color', 'rgba(0, 0, 0, ' + opacity +')');
  }

One of my first attempts was

for(oneShot < 200; opacity = 1){
    if(oneShot = 200){
        break;
        }
    }

followed by

do{
    opacity = 1;} while(
        oneShot < 201);

Both evidently with JavaScript instead of jquery

Thoughts?

to clarify: Currently, when the page loads, the header in question is a solid black. Once one pixel has been scrolled, the code posted above makes the header opaque then as the scroll continues down, fades back to black. The desired effect is to load page, have header black, scroll down past 100px while header stays black. Upon passing 100px, when scrolling back up the opacity fade takes effect. **

java != javascript, javasript == jquery. Also don't write infinite loops, they'll block the ui. Though maybe harsh, your approach is completely wrong in a browser setting. Read about events/event-listeners. — Yoshi
– Yoshi, Commented Jul 9, 2014 at 8:07
Im merely a web ui hobbyist. I come here because I know I dont know. Thanks for the comment though Yoshi — user3819397
– user3819397, Commented Jul 9, 2014 at 8:10
Have a look at api.jquery.com/scroll (there's even a demo). But personally I'd recommend learning javascript before using any library (though that's just an opinion). — Yoshi
– Yoshi, Commented Jul 9, 2014 at 8:12
Sorry, but the first thing you have to do is stop calling JavaScript Java -- they're completely different languages. — JJJ
– JJJ, Commented Jul 9, 2014 at 8:18
@Yoshi: jQuery == JavaScript, not the other way around. All jQuery is JS but not all JS is jQuery. — Abbas
– Abbas, Commented Jul 9, 2014 at 8:23

Yoshi · Accepted Answer · 2014-07-09 08:49:50Z

1

A few things before I get to the real question:

As has been said in the comments java is not javascript
And jQuery is a library written in javascript
In javascript it's never a good idea to write an infinite loop to wait for a certain condition to become true (UI-wise)

That said, here is a very simple example of how you can approach your problem:

// attach a listener function to the window.scroll event:
$(window).on('scroll', function scrollListener(evt) {
  // each time the event gets triggered, get the scrollTop-value
  var scrollTopValue = $(window).scrollTop();

  // if it is above/below (don't use equal!) a certain value:
  if (scrollTopValue > 500) {
    // handle that condition:
    $('#test').addClass('foo');

    // remove the listener:
    $(window).off('scroll', scrollListener);
  }
});

demo: http://jsbin.com/sobewute/2/

edited Jul 9, 2014 at 8:49

answered Jul 9, 2014 at 8:40

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

EaterOfCode Over a year ago

Almost claiming that the code didn't work but I forgot I got a screen with a height of 1900px oops, proposing calc(100% + 600px) for height

Yoshi Over a year ago

@EaterOfCode You're right, I'll add your update as the demo ;)

user3819397 Over a year ago

So far, looking good. Quick application clarification question. when handling the condition, I want to take off the opacity = 1. What would be a simple way to ensure that it equals 1 before and then after, let the original definition take over?

Yoshi Over a year ago

@user3819397 In general I'd advice against manipulating style-properties directly. For a lot of reasons it's often better to just add/remove classes. With this and regarding your question, one could use hasClass.

Collectives™ on Stack Overflow

How to write a do while loop in jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related