滾動div顏色更改

Question

嘗試根據div。滾動更改菜單中btns的顏色。但是無法正常工作。. 添加了一張圖片，以幫助您了解我正在嘗試執行的操作。

html btns菜單：

<div class="left-bar-preview">
    <div class="image mini-sub"><img class="icon-image" src="../images/human.svg" width="42">
    </div>
    <a class="mini-sub w-inline-block" href="#" id="name-btn">
      <div></div>
    </a>
    <a class="mini-sub w-inline-block" href="#" id="style-btn">
      <div></div>
    </a>
    <a class="mini-sub w-inline-block" href="#" id="position-btn">
      <div></div>
    </a>
    <a class="mini-sub w-inline-block" href="#" id="information-btn">
      <div></div>
    </a>
    <a class="mini-sub w-inline-block" href="#" id="budget-btn">
      <div></div>
    </a>
    <a class="mini-sub w-inline-block" href="#" id="photos-btn">
      <div></div>
    </a>
  </div>

HTML div：

<div class="name preview-content w-clearfix" data-ix="on-scroll-light-up" id="name-div">
    <h4 class="field-box spacing"><strong>Name</strong></h4>
    <h4>My new tattoo</h4>
  </div>
  <div class="name preview-content w-clearfix" id="style-div">
    <h4 class="field-box spacing"><strong>Style</strong></h4>
    <h4>Heading</h4>
  </div>
  <div class="name preview-content w-clearfix" id="position-div">
    <h4 class="field-box spacing"><strong>Position on body</strong></h4>
    <h4>Black &amp; White</h4>
  </div>
  <div class="name preview-content w-clearfix" id="side-div">
    <h4 class="field-box spacing"><strong>Side</strong></h4>
    <h4>Right</h4>
  </div>
  <div class="name preview-content w-clearfix" id="information-div">
    <h4 class="field-box spacing"><strong>Brief</strong></h4>
    <h4>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."<br>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</h4>
  </div>
  <div class="name preview-content w-clearfix" id="budget-div">
    <h4 class="field-box spacing"><strong>Budget</strong></h4>
    <h4>$200-$400</h4>
  </div>
  <div class="name preview-content w-clearfix" id="photos-div">
    <h4 class="field-box spacing"><strong>Photos</strong></h4>
  </div>
</div>

javascript：

<script>
$(window).scroll(function(){;
    w = Math.floor( $(window).scrollTop() );  
    $('.mini-sub').css( 'background-color', '' ); 
    if(w<=$("#name-div").offset().top){
         $("#name-btn").css( 'background-color', '#972663' );   
    }else if(w<=$("#style-div").offset().top){
         $("#style-btn").css( 'background-color', '#972663' );   
    }else if(w<=$("#position-div").offset().top){
         $("#position-btn").css( 'background-color', '#972663' );   
    }else if(w<=$("#information-div").offset().top){
         $("#information-btn").css( 'background-color', '#972663' );   
    }else if(w<=$("#budget-div").offset().top){
         $("#budget-btn").css( 'background-color', '#972663' ); 
    }else{
         $("#photos-div").css( 'background-color', '#972663' );   
         }

}); 
</script>

Answer 1

這是您要尋找的-JS代碼：

$(".right").scroll(function(){
var st = $(this).scrollTop();
if(st <= 50){
    $(".A").css("color", "red")
}
else if(st <= 100){
    $(".B").css("color", "red")
}
else if(st <= 150){
    $(".C").css("color", "red")
}
});

https://jsfiddle.net/ashwyn/qudnauvq/

Answer 2

這是對@MotaBOS解決方案的修改

$(".right").scroll(function(){
var st = $(this).scrollTop();
  $(".left span").css("color", "black")
if(st <= 50){

    $(".A").css("color", "red")
}
else if(st <= 100){
    $(".B").css("color", "red")
}
else {
    $(".C").css("color", "red")
}