Remove Link trên cuộn

Question

Trong ứng dụng của tôi, tôi có 4 liên kết với nhau ID s và 4 DIV với cùng ID như mỗi liên kết (Tôi sử dụng chúng cho neo-jumping).

mã hiện tại của tôi:

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

người dùng Đôi khi chỉ cần di chuyển tới div thứ hai id="2" đầu tiên trước khi họ click vào các nút và khi họ làm như vậy, họ được gửi đến đầu id="1" đầu tiên thay vì tiếp tục tiếp theo IDid="3".

Chỉ một nút hiển thị tại một thời điểm sử dụng CSS và khi liên kết được nhấp, tôi sẽ xóa liên kết đó.

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

Làm thế nào tôi có thể đạt được vì vậy nếu người dùng cuộn xuống, mỗi liên kết có cùng ID như DIV bị xóa bỏ.

Ví dụ:Nếu người dùng cuộn xuống để <div class="col-md-12" id="1">, <a href="#" id="1" class="btn">One</a> bị loại bỏ và liên kết Tiếp theo sẽ là <a href="#" id="2" class="btn">Two</a> bấm vào.

PS: Đây là một trang năng động và ID s sẽ thay đổi, vì vậy chúng ta cần chọn khác có thể

Đây là những gì tôi đã cố gắng cho đến bây giờ, nhưng vấn đề là nó loại bỏ tất cả các liên kết và không đầu tiên duy nhất

$(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: cách HTML & CSS được thiết lập không cần phải như thế này và tôi có thể thay đổi nó thành bất cứ điều gì mà sẽ tốt hơn cho các chức năng

Answer 1

Đó là không có vấn đề để làm cho nó năng động:

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

sử dụng scrollEvent nghe

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

Sử dụng cái gì đó như thế và nó sẽ làm việc .. Hope điều này giúp

Answer 3

tôi nghĩ rằng đây là nhiều hơn hoặc ít hơn những gì bạn đang sau:

JSFiddle

https://jsfiddle.net/wc0cdfhv/

Bạn nên lưu lại vị trí của các phần tử bên ngoài chức năng cuộn, theo cách này không cần tính toán mọi lúc.

Bạn cũng nên nhớ điều này sẽ không mở rộng quá rõ nếu bạn có nội dung động nhưng nếu bạn chỉ làm việc với 4 liên kết tĩnh thì nó sẽ hoạt động tốt.

Mã

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