javascript - Remove Link on scroll - Stack Overflow

admin管理员组

文章数量:1357712

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

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

• javascript
• jquery
• html
• remove-if
• anchor-scroll

Share Improve this question Follow edited Dec 28, 2016 at 13:29 Rubioli asked Dec 24, 2016 at 11:19 RubioliRubioli 72577 silver badges3737 bronze badges 4

• you should never EVER use duplicate ID's !! – yezzz Commented Dec 24, 2016 at 11:21
• Thanks right, but reason I have the same is for selector and selecting the link – Rubioli Commented Dec 24, 2016 at 11:43
• 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 ... stackoverflow./questions/5366702/… – yezzz Commented Dec 24, 2016 at 12:09
• @yezzz Thanks for bringing number to my attention. And yeah data-attributes is a good idea. I fixed the issue with href – Rubioli Commented Dec 24, 2016 at 12:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

It's no problem to make it dynamic:

JSFiddle: https://jsfiddle/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./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./400/500/">
</div>

<div class="col-md-12" id="2">
    <img src="http://lorempixel./450/500/">
</div>

<div class="col-md-12" id="3">
    <img src="http://lorempixel./480/500/">
</div>

<div class="col-md-12" id="4">
    <img src="http://lorempixel./500/500/">
</div>

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

JSFiddle

https://jsfiddle/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./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./images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

<div class="col-md-12" id="2">
    <img src="https://www.myoodle./images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

<div class="col-md-12" id="3">
    <img src="https://www.myoodle./images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

<div class="col-md-12" id="4">
    <img src="https://www.myoodle./images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>

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

本文标签： javascriptRemove Link on scrollStack Overflow