滚动时删除链接

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>

有时用户在点击按钮之前首先滚动到第二个div id="2" ，当他们这样做时，他们首先被发送到顶部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
    });
});

如果用户向下滚动，我如何实现这一目标，每个与DIV具有相同ID链接都将被删除。

例如： 如果用户向下滚动到<div class="col-md-12" id="1"> ，则<a href="#" id="1" class="btn">One</a>获取已删除，下一个链接将<a href="#" id="2" class="btn">Two</a>点击。

PS：这是一个动态页面， ID会改变，所以我们需要另一个选择器

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

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

将元素的位置缓存在滚动函数之外是很好的，这样就不需要每次都计算它。

你还应该记住，如果你有动态内容，这将无法很好地扩展，但如果你只是使用4个静态链接，它会很好。

码

 $(function() { var scroll1 = $('#1').offset().top; var scroll2 = $('#2').offset().top; var scroll3 = $('#3').offset().top; var scroll4 = $('#4').offset().top; $(window).scroll(function() { 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> 

Answer 2

让它变得动态没问题：

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> 

Answer 3

使用scrollEvent监听器

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

使用类似的东西，它会工作..希望这有帮助