Question

我正在尝试获取一个变量来设置颜色，直到达到页面的某个滚动距离，一旦到达该点，我希望变量停止变为该颜色并恢复到正常设置。一旦我向上滚动页面，我不希望颜色返回。我的第一个想法是JavaScript while while循环，但我不确定这是最好的方式，甚至是如何在jquery中执行它。

到目前为止，这就是我所拥有的

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 +')');
  }

我的第一次尝试是

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

接着是

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

显然使用JavaScript而不是jquery

思想？

澄清：目前，当页面加载时，有问题的标题是纯黑色。一旦滚动了一个像素，上面张贴的代码会使标题不透明，然后滚动继续向下，淡化为黑色。所需的效果是加载页面，标题为黑色，向下滚动超过100px，而标题保持黑色。在传递100px时，向上滚动时不透明度淡化生效。 **

Answer 1

在我谈到真正的问题之前的一些事情：

正如在评论中所说，java 不是 javascript
jQuery 是一个 javascript
在javascript中编写一个无限循环来等待某个条件变为真（用户界面）并不是一个好主意。

那就是说，这是一个非常简单的例子，说明如何解决问题：

// 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);
  }
});

演示：http://jsbin.com/sobewute/2/

如何在jquery中编写do while循环

1 个答案: