滚动时删除链接

Question

在我的应用程序有不同的4个链路ID秒和4 DIV具有相同ID的各个环节(我使用他们的锚跳跃).

我目前的代码:

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

有时用户id="2"在点击按钮之前只先滚动到第二个div ,当他们这样做时,他们会先发送到顶部id="1"而不是继续下一个ID id="3".

使用时,一次只能看到一个按钮CSS,当单击链接时,我删除该链接.

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

我怎样才能实现,所以如果用户向下滚动,具有相同的每一个环节ID的DIV移除.

例如: 如果用户向下滚动<div class="col-md-12" id="1">,<a href="#" id="1" class="btn">One</a>将被删除,下一个链接将被<a href="#" id="2" class="btn">Two</a>点击.

PS:这是一个动态页面,IDs会改变,所以我们需要另一个选择器

这是我到目前为止所尝试过的,但问题是它删除了所有链接,而不是仅删除第一个链接

$(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:方式HTML和CSS设置不需要这样,我可以将它改为任何更好的功能

Answer 1

使其动态化是没有问题的：

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

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