Remove Link on scroll

Question

In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).

My current code:

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

Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".

Only one button is visible at a time with use of CSS and when link is clicked, I remove that 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
    });
});

How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.

For instance: If user scroll down to <div class="col-md-12" id="1">, <a href="#" id="1" class="btn">One</a> gets removed and Next link would be <a href="#" id="2" class="btn">Two</a> to click on.

PS: This is for a dynamic page and IDs will change, so we need another selector maybe

This is what I have tried until now, but problem is that it removes all the links and not first one only

$(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: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function

Answer 1

It's no problem to make it dynamic:

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 2

I think this is more or less what you're after:

JSFiddle

https://jsfiddle.net/wc0cdfhv/

It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.

You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.

Code

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