Usuń link na zwoju

Question

W mojej aplikacji mam 4 powiązań z różnymi ID S i 4 DIV z samym ID jak każdego linku (używam ich do kotwicy skokach).

Mój bieżący kod:

<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> 

użytkownicy czasami po prostu przejść do drugiego div id="2" pierwszy przed kliknięciem na przycisku i kiedy to zrobić, są one wysyłane do zamiast góry id="1" pierwszy kontynuować następnego IDid="3".

Tylko jeden przycisk jest widoczny na raz przy użyciu CSS, a po kliknięciu łącza usuwam ten link.

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

jaki sposób można osiągnąć, więc jeśli użytkownik przewijania w dół, każdy link, który ma taką samą ID jak DIV zostaną usunięte.

Na przykład:Jeśli użytkownik przewijania w dół do <div class="col-md-12" id="1">, <a href="#" id="1" class="btn">One</a> zostanie usunięte, a następnego linku byłoby <a href="#" id="2" class="btn">Two</a> kliknąć.

PS: To jest dla dynamicznej strony i ID s zmieni, więc potrzebujemy innego wyboru może

To co próbowałem do tej pory, ale problemem jest to, że usuwa wszystkie linki a nie tylko pierwszy

$(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: sposób HTML & CSS jest Instalator nie musi podoba i mogę go zmienić na cokolwiek, że będzie lepiej dla funkcji

Answer 1

To żaden problem, aby to dynamiczna:

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

użycie ScrollEvent słuchacz

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

użyć czegoś takiego i to będzie działać .. Nadzieja to pomaga

Answer 3

myślę, że to jest mniej więcej to, co jesteś po:

JSFiddle

https://jsfiddle.net/wc0cdfhv/

Dobrze jest buforować położenie elementów poza funkcją przewijania, w ten sposób nie trzeba go obliczać za każdym razem.

Należy również pamiętać, że nie będzie to skalować zbyt dobrze, jeśli masz dynamiczną zawartość, ale jeśli pracujesz z 4 statycznymi linkami, wszystko będzie dobrze.

Kod

$(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>