jQuery - Eine andere Hintergrundfarbe für jedes Objekt, wenn es in einem sticky-Menü aktiv ist

Question

Ich habe einige Schwierigkeiten damit, meinen Sticky-Menü-Objekten ihre eigene Hintergrundfarbe zuzuweisen, wenn ihr jeweiliger Anker gescrollt wird das Ansichtsfenster.

JSfiedle hier: https://jsfiddle.net/ym88etuk/6/ - das funktioniert, wie ich es jetzt will, aber ich könnte immer noch Hilfe verwenden, um diese DRY freundlich zu machen.

HTML:

<ul class="sticky"> 
    <a href=#part1 class="scroll"> 
    <li>part1</li> 
    </a> 
    <a href=#part2 class="scroll"> 
    <li>part2</li> 
    </a> 
    <a href=#part3 class="scroll"> 
    <li>part3</li> 
    </a> 
    <a href=#part4 class="scroll"> 
    <li>part4</li> 
    </a> 
</ul> 
<div class=content> 
    <div id=part1 class="section gray"> 
    </div> 
    <div id=part2 class="section green"> 
    </div> 
    <div id=part3 class="section gray"> 
    </div> 
    <div id=part4 class="section green"> 
    </div> 
    <div class=extraspace> 
    </div> 
    </div> 
</div> 

CSS:

.sticky{ 
    position: fixed; 
    top:0px; 
    width:100%; 
    z-index:999; 
    background: white; 
    margin:0; 
} 
.content{ 
    position:relative; 
    top: 28px; 
    width:100%; 
} 
ul{ 
    list-style-type:none; 
} 
li{ 
    float: left; 
    width 20%; 
    padding:2.5%; 
} 
.section{ 
    height:300px; 
} 
.gray{ 
    background-color:gray; 
} 
.green{ 
    background-color:green; 
} 
.clearfix:after { 
    content: " "; 
    display: table; 
    clear: both; 
} 
.extraspace{ 
    height: 400px; 
} 

jQuery/Javascript:

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html, body').animate({ 
     scrollTop:($(this.hash).offset().top) - 32}, 500); 
    }); 
}); 


$(window).scroll(function(){ 
// I've removed my work here, because it was very broken... and not pertinent to solving the issue. 
} 

Answer 1

Ich habe eine Antwort, obwohl ich immer noch diese fit DRY Programmiertechniken zu machen habe Schwierigkeiten:

ich die JSfiddle aktualisiert haben diese Änderungen https://jsfiddle.net/ym88etuk/36/

HTML zu reflektieren:

<ul class="sticky"> 
    <a href=#part1 class="scroll"> 
    <li>part1</li> 
    </a> 
    <a href=#part2 class="scroll"> 
    <li>part2</li> 
    </a> 
    <a href=#part3 class="scroll"> 
    <li>part3</li> 
    </a> 
    <a href=#part4 class="scroll"> 
    <li>part4</li> 
    </a> 
</ul> 
<div class=content> 
<div id=part1 class="section gray"> 
</div> 
<div id=part2 class="section green"> 
</div> 
<div id=part3 class="section gray"> 
</div> 
<div id=part4 class="section green"> 
</div> 
<div class=extraspace> 
</div> 
</div> 
</div> 

CSS:

.sticky{ 
    position: fixed; 
    top:0px; 
    width:100%; 
    z-index:999; 
    background: white; 
    margin:0; 
} 
.content{ 
    position:relative; 
    top: 28px; 
    width:100%; 
} 
ul{ 
    list-style-type:none; 
} 
li{ 
    float: left; 
    width 20%; 
    padding:2.5%; 
} 
.section{ 
    height:300px; 
} 
.gray{ 
    background-color:gray; 
} 
.green{ 
    background-color:green; 
} 
.blue{ 
    background-color:blue; 
    color: #fff; 
} 
.orange{ 
    background-color:orange; 
    color: #fff; 
} 
.pink{ 
    background-color:pink; 
    color: #fff; 
} 
.purple{ 
    background-color:purple; 
    color: #fff; 
} 
.clearfix:after { 
    content: " "; 
    display: table; 
    clear: both; 
} 
.extraspace{ 
    height: 400px; 
} 

jQuery:

//smooth scroll 
jQuery(document).ready(function($) { 
var greenback = 
    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html, body').animate({ 
     scrollTop:($(this.hash).offset().top) - 32}, 500); 
    }); 
}); 

//Navbar Functions 
$(document).ready(function() { 
    var pos1 = $("#part1").position(); 
    var pos2 = $("#part2").position(); 
    var pos3 = $("#part3").position(); 
    var pos4 = $("#part4").position(); 
    $(window).scroll(function(){ 
    var windowpos = $(window).scrollTop(); 
    part1li = $("li", 'a[href="#part1"]'); 
    part2li = $("li", 'a[href="#part2"]'); 
    part3li = $("li", 'a[href="#part3"]'); 
    part4li = $("li", 'a[href="#part4"]'); 
    if (windowpos >= pos1.top && windowpos < pos2.top) { 
      part1li.addClass('blue'); 
     } else { 
      part1li.removeClass('blue'); 
     } 
      if (windowpos >= pos2.top && windowpos < pos3.top) { 
      part2li.addClass('orange'); 
     } else { 
      part2li.removeClass('orange'); 
     } 
      if (windowpos >= pos3.top && windowpos < pos4.top) { 
      part3li.addClass('pink'); 
     } else { 
      part3li.removeClass('pink'); 
     } 
      if (windowpos >= pos4.top) { 
      part4li.addClass('purple'); 
     } else { 
      part4li.removeClass('purple'); 
     } 
     }); 
    }); 

Answer 2

Was Sie brauchen, ist jQuery.scrollfire

Und arbeiten demo here.

1. Import jQuery.scroll Skript

<script src="path/to/jQuery.scrollfire.js"></script> 

2. Update Ihre HTML

<ul class="sticky"> 
<!-- add id for each anchor --> 
    <a href=#part1 class="scroll" id="anchor1"> 
    <li>part1</li> 
    </a> 
    <a href=#part2 class="scroll" id="anchor2"> 
    <li>part2</li> 
    </a> 
    <a href=#part3 class="scroll" id="anchor3"> 
    <li>part3</li> 
    </a> 
    <a href=#part4 class="scroll" id="anchor4"> 
    <li>part4</li> 
    </a> 
</ul> 
<!-- add target anchor --> 
<div class=content> 
<div id=part1 class="section gray" data-anchor="anchor1"> 
</div> 
<div id=part2 class="section green" data-anchor="anchor2"> 
</div> 
<div id=part3 class="section gray" data-anchor="anchor3"> 
</div> 
<div id=part4 class="section green" data-anchor="anchor4"> 
</div> 
<div class=extraspace> 
</div> 
</div> 
</div> 

3. Update Ihr Skript

jQuery(document).ready(function($) { 
    $(".scroll").click(function(event){  
     event.preventDefault(); 
     $('html, body').animate({ 
     scrollTop:($(this.hash).offset().top) - 32}, 500); 
    }); 

    //bind section scrollfire event 
    $(".section").scrollfire({ 
    topOffset: 64, 
    onTopOut:function(elm, distance){ 
     var className = $(elm).hasClass('gray') ? 'gray' : 'green'; 
     $('.scroll > li').removeClass('gray green'); 
     $('#'+$(elm).data('anchor')+' > li').addClass(className); 
     console.info($(elm).attr('id') + 'top out'); 
    }, 
    onTopIn:function(elm, distance){ 
     var className = $(elm).hasClass('gray') ? 'gray' : 'green'; 
     $('.scroll > li ').removeClass('gray green'); 
     $('#'+$(elm).data('anchor')+' > li').addClass(className); 
     console.info($(elm).attr('id') + 'top in'); 
    } 
    }); 
}); 

Answer 3

Sie können es tun, indem Sie den div-Hintergrund bekommen und es als li-Hintergrund einstellen ...freundlich https://jsfiddle.net/RRR0308/ym88etuk/10/ überprüfen

HTML

<ul class="sticky"> 

    <li> 
    <a href=#part1 class="scroll"> 
     part1 
    </a> 
    </li> 
    <li> 
    <a href=#part2 class="scroll"> 
     part2 
    </a> 
    </li> 
    <li> 
    <a href=#part3 class="scroll"> 
     part3 
    </a> 
    </li> 
    <li> 
    <a href=#part4 class="scroll"> 
     part4 
    </a> 
    </li> 
</ul> 

<div class=content> 
    <div id=part1 class="section gray"> 
    </div> 

    <div id=part2 class="section green"> 
    </div> 

    <div id=part3 class="section red"> 
    </div> 

    <div id=part4 class="section yellow"> 
    </div> 

    <div class=extraspace> 
    </div> 
</div> 

CSS

.sticky{ 
    position: fixed; 
    top:0px; 
    width:100%; 
    z-index:999; 
    background: white; 
    margin:0; 
} 
.content{ 
    position:relative; 
    top: 28px; 
    width:100%; 
} 
ul{ 
    list-style-type:none; 
} 
li{ 
    float: left; 
    width 20%; 
    padding:2.5%; 
} 
.section{ 
    height:300px; 
} 
.gray{ 
    background-color:gray; 
} 
.green{ 
    background-color:green; 
} 
.red{ 
    background-color:red; 
} 
.yellow{ 
    background-color:yellow; 
} 
.clearfix:after { 
    content: " "; 
    display: table; 
    clear: both; 
} 
.extraspace{ 
    height: 400px; 
} 



li{ 
    cursor:pointer; 
} 

jQuery

//smooth scroll 
jQuery(document).ready(function($) { 
    $("li").click(function(event){ 

     event.preventDefault(); 
    event.stopPropagation(); 
    t= $(this).find('a').attr('href'); 
    var bg=$(document).find(''+t).css('background-color'); 

    $('li').removeClass('highlight').css('background-color', '#fff'); 

    $(this).css('background-color',bg); 
     $('html, body').animate({ 

     scrollTop:($(t).offset().top) - 32}, 500); 

    console.log(bg); 
    }); 

});