卸下滾動

Question

鏈接在我的應用程序有不同的ID第4個鏈接和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"第一，而不是繼續下一個IDid="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：這是一個動態頁面和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/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();  \t 
 
    } 
 
    }); 
 
});

<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

使用表示ScrollEvent聽衆

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

使用類似的東西更好，它會工作。希望這有助於

Answer 3

我認爲這或多或少是什麼你是後：

的jsfiddle

https://jsfiddle.net/wc0cdfhv/

將元素的位置緩存在滾動函數之外很好，這樣就不需要每次計算它的值。

你還應該記住，如果你有動態內容，這不會太好，但如果你只是使用4個靜態鏈接，它將會很好。

代碼

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