entfernt Link auf dem Scroll-

Question

In meiner Anwendung habe ich 4 Links mit unterschiedlichen ID s und 4 DIV mit gleichen ID wie jeder Link (ich sie für Anker-Springen verwenden).

Mein aktueller Code:

<a href="#1" id="go1" class="btn" data-anchor="relativeanchor">One</a> 
<a href="#2" id="go2" class="btn" data-anchor="relativeanchor">Two</a> 
<a href="#3" id="go3" class="btn" data-anchor="relativeanchor">Three</a> 
<a href="#4" id="go4" class="btn" data-anchor="relativeanchor">Four</a> 

<div class="col-md-12 each-img" id="1"> 
    <img src="img/album-img.png"> 
</div> 

<div class="col-md-12 each-img" id="2"> 
    <img src="img/album-img.png"> 
</div> 

<div class="col-md-12 each-img" id="3"> 
    <img src="img/album-img.png"> 
</div> 

<div class="col-md-12 each-img" id="4"> 
    <img src="img/album-img.png"> 
</div> 

Irgendwann Benutzer scrollen Sie einfach auf den zweiten div id="2" zuerst, bevor sie auf Schaltflächen klicken und wenn sie dies tun, werden sie gesendet id="1" zuerst statt weiter nach oben zum nächsten IDid="3".

Mit der Verwendung von CSS ist immer nur eine Schaltfläche sichtbar, und wenn auf die Verknüpfung geklickt wird, entferne ich diese Verknüpfung.

CSS

a.btn{display: none}  
a.btn a:first-child{display: block !important;} 

jQuery

$(document).ready(function(){ 
    $('a.btn').click(function() { 
     $(this).remove(); // remove element which is being clicked 
    }); 
}); 

Wie kann ich mich nach unten, so, wenn der Benutzer blättern erreichen können, jede Verbindung, die gleiche ID wie die DIV erhalten entfernt hat.

Zum Beispiel:Wenn der Benutzer nach unten scrollen zu <div class="col-md-12" id="1">, wird <a href="#" id="1" class="btn">One</a> entfernt und Next Link würde <a href="#" id="2" class="btn">Two</a> sein auf klicken.

PS: Dies ist für eine dynamische Seite und ID s wird sich ändern, so müssen wir einen anderen Wähler vielleicht

Dies ist, was ich bis jetzt versucht, aber Problem ist, dass es automatisch alle Links entfernt und nicht nur eine erste

$(function() { 
    var div = $('.each-img').offset().top; 
    $(window).scroll(function() { 
     var scrollTop = $(this).scrollTop(); 
     $('.each-img').each(function(){ 
      if (scrollTop >= div) { 
       $("a.btn:eq(0)").remove(); 
       //$("a.btn:first-child").remove(); 
      } 
     }); 
    }); 
}); 

PS: Die Art und WeiseHTML & CSS ist Setup muss nicht dies mögen, und ich kann es, was auch immer, dass

Answer 1

Es ist kein Problem, es dynamisch zu machen:

JSFiddle: https://jsfiddle.net/rc0v2zrw/

var links = $('.btn'); 
 

 
$(window).scroll(function() { 
 
    var scrollTop = $(this).scrollTop(); 
 
    links.each(function() { 
 
    var href = $(this).attr('href'); 
 
    var content = $(href); 
 
    if (scrollTop > content.offset().top) { 
 
     $(this).hide();  \t 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position:fixed; top:0; left:0; right:0"> 
 
    <a href="#1" class="btn">One</a> 
 
    <a href="#2" class="btn">Two</a> 
 
    <a href="#3" class="btn">Three</a> 
 
    <a href="#4" class="btn">Four</a> 
 
</div> 
 

 
<div class="col-md-12" id="1"> 
 
    <img src="http://lorempixel.com/400/500/"> 
 
</div> 
 

 
<div class="col-md-12" id="2"> 
 
    <img src="http://lorempixel.com/450/500/"> 
 
</div> 
 

 
<div class="col-md-12" id="3"> 
 
    <img src="http://lorempixel.com/480/500/"> 
 
</div> 
 

 
<div class="col-md-12" id="4"> 
 
    <img src="http://lorempixel.com/500/500/"> 
 
</div>

Answer 2

Verwendung Scroll Zuhörer

$(window).scroll(function(e){ 
    if($(this)).scrollTop >= $('div#1').offset().top){ 
      $("a#1").hide(); 
    } 
}); 

Verwenden Etwas, dass für die Funktion besser ändern wird und es wird funktionieren .. Hoffnung dies hilft

Answer 3

ich denke, das ist mehr oder weniger, was Sie nach:

JSFiddle

Es ist gut, die Position Ihrer Elemente außerhalb der Bildlauffunktion zwischenzuspeichern, auf diese Weise muss sie nicht jedes Mal neu berechnet werden.

Sie sollten auch bedenken, dass dies nicht so gut skalieren wird, wenn Sie dynamische Inhalte haben, aber wenn Sie nur mit 4 statischen Links arbeiten, wird es gut gehen.

-Code

$(function() { 
 
\t var scroll1 = $('#1').offset().top; 
 
\t var scroll2 = $('#2').offset().top; 
 
\t var scroll3 = $('#3').offset().top; 
 
\t var scroll4 = $('#4').offset().top; 
 
\t $(window).scroll(function() { 
 
    \t var scrollTop = $(this).scrollTop(); 
 
    if (scrollTop >= scroll4) { 
 
     $("#go1, #go2, #go3, #go4").hide(); 
 
    } 
 
    else if (scrollTop >= scroll3) { 
 
     $("#go1, #go2, #go3").hide(); 
 
     $("#go4").show(); 
 
    } 
 
    else if (scrollTop >= scroll2) { 
 
     $("#go1, #go2").hide(); 
 
     $("#go3, #go4").show(); 
 
    } 
 
    else if (scrollTop >= scroll1) { 
 
     $("#go1").hide(); 
 
     $("#go2, #go3, #go4").show(); 
 
    } 
 
    else { 
 
     $("#go1, #go2, #go3, #go4").show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="position:fixed; top:0; left:0; right:0; background:#CCC"> 
 
<a href="#1" id="go1" class="btn" data-anchor="relativeanchor">One</a> 
 
<a href="#2" id="go2" class="btn" data-anchor="relativeanchor">Two</a> 
 
<a href="#3" id="go3" class="btn" data-anchor="relativeanchor">Three</a> 
 
<a href="#4" id="go4" class="btn" data-anchor="relativeanchor">Four</a> 
 
</div> 
 

 
<div class="col-md-12" id="1"> 
 
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg"> 
 
</div> 
 

 
<div class="col-md-12" id="2"> 
 
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg"> 
 
</div> 
 

 
<div class="col-md-12" id="3"> 
 
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg"> 
 
</div> 
 

 
<div class="col-md-12" id="4"> 
 
    <img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg"> 
 
</div>