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

Scourings

you should never EVER use duplicate ID's !! – Emmenagogue

Thanks right, but reason I have the same is for selector and selecting the link – Scourings

Well, you could also use data-attributes, for instance. BTW, are you aware that your hrefs will not send users to the associated div? Also, you shouldn't use only numbers for ID's ... #5367202 – Emmenagogue

@Emmenagogue Thanks for bringing number to my attention. And yeah data-attributes is a good idea. I fixed the issue with href – Scourings

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>

Finnegan

Thanks @antishok. Works like a charm :) – Scourings

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>

Snider

Thanks @Snider works like a charm. Isn't it any option or solution for dynamic content? – Scourings

It is an option but rather than referencing the anchors and divs containing images directly, when the page loads, you will need to query for the items using class names or something similar. I can add an example if you need otherwise if this solved your question please mark it as the answer :) – Snider

Thank you so much :) This works good for static yeah but for dynamic, it stops working since when I go further IDs are not only 1-4 and it changes to for example 100. I would appreciate it if you could give another example as you mention :) Thanks so much – Scourings

Thanks for your example :). I would appreciate it if you could give me a example for dynamic as you mentioned :) – Scourings

Answer 3

use scrollEvent listener

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

Use Something like that and it will work .. Hope this helps

Tanked

Thanks @Daniyal, This works but it only removes first anchor. What I want to achieve is to remove whatever anchor that has same ID is div when they scroll. If they scroll down to third link, I want to remove all 3 link and not only #1 – Scourings

use more if statements to check if the window.scrollTop >= div2,div3,div4 and it is then hide a2,a3,a4 accordingly ... – Tanked