9

在我的应用程序中，我有 4 个具有不同IDs 的链接和 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 ，当他们这样做时，他们会被发送到 top id="1"first 而不是 continue to next 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： &的设置方式不需要喜欢这样，我可以将其更改为对功能更好的任何内容HTMLCSS

4

3 回答 3

3

让它动态化是没有问题的：

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>

于 2016-12-28T15:18:00.987 回答
3

我认为这或多或少是您所追求的：

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>

于 2016-12-24T12:40:39.753 回答
2

使用滚动事件监听器

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

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

于 2016-12-24T11:26:30.197 回答