スクロールdivの色変更時

Question

スクロールに依存するメニュー内のbtnの色をdivに応じて変更しようとしましたが、正しく動作しません。Added a pic何をしようとしているのかを理解するのに役立ちます。

の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") 
}