如何在jQuery中编写do while循环

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. **

Answer 1

A few things before I get to the real question:

1. As has been said in the comments java is not javascript
2. And jQuery is a library written in javascript
3. 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/