divにスクロールし、jQueryを使用してdivを非表示にする

Question

jQueryを使用してdivにスクロールして表示/非表示することはできますか？

if（scrollVl）<この変更はdivにスクロールされますか？

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
    var scrollVal = $(this).scrollTop(); 
 

 
    if(scrollVal > 0){ 
 
     $('.something').css("opacity","1"); 
 

 
    }else{ 
 
    $('.something').css("opacity","0"); 
 
    }; 
 
    }); 
 
});

Answer 1

コードの下に確認してください。

$(document).ready(function(){ 
 
    $(window).scroll(function(){ 
 
     var scrollVal = $(this).scrollTop(); 
 
      
 
\t \t if(scrollVal > 0){ 
 
\t \t $('.something').css("opacity","1"); 
 
\t \t 
 
\t \t }else{ 
 
\t \t \t $('.something').css("opacity","0"); 
 
\t \t }; 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='something' style=''>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 
 
<br><br> 
 
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' 
 
    <br/><br/> 
 
    In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 
 
<br><br> 
 
'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.' 
 
    <br/><br/> 
 
NEW DELHI: To protest against the government's decision to yank 500-and 1,000-rupee notes, the leaders of 15 different opposition parties will march tomorrow from parliament to the presidential palace of Rashtrapati Bhawan to meet with President Pranab Mukherjee and update him on what they describe as the unrelenting hardship caused to people by the sudden demonetisation move. Prime Minister Narendra Modi met last evening with ministers to review the impact of the sudden demonetisation drive; he reportedly also asked them for an update on how they are promoting digital transactions to steer India away from such a cash-intensive economy. 
 

 
</div>

Answer 2

をこれは、あなたが探しているものかもしれません：

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     // Get scrollbar position to top 
     var scrollVal = $(window).scrollTop(); 

     // Get item position to top 
     var itemPosition = $('.something').offset().top; 

     // You have passed the item 
     if(scrollVal > itemPosition){ 
      $('.something').css("opacity","1"); 
     } 
     // You are above the item 
     else{ 
      $('.something').css("opacity","0"); 
     }; 
    }); 
}); 

Answer 3

$.offset()を使用して、ドキュメントに対する要素の位置を取得します。

bottomScrollValueは、文書のscrollTopの位置で、#triggerがウィンドウの下部に表示されます。

scrollTopは、スクロールアップされたドキュメントの部分の長さです。

スニペットでは、スニペットの高さを取得するのに$(window).height()を使用しましたが、ネイティブページでは正しく機能しません。代わりにネイティブページにはdocument.body.clientHeightを使用する必要があります。

(function($, window, document) { 
 
    var triggerScroll = $('#trigger').offset().top; 
 
    $(document).on('scroll', function() { 
 
    var bottomScrollValue = $(document).scrollTop() + ($(window).height()); 
 
    if (bottomScrollValue >= triggerScroll) { 
 
     setTimeout(function() { 
 
     var show = $('#triggerShow'); 
 
     show.removeClass('hidden'); 
 
     }, 1000); 
 
    } else { 
 
     $('#triggerShow').addClass('hidden'); 
 
    } 
 
    }); 
 
    
 
    $('#filler').on('click', function() { 
 
    var triggerPosition = 0; 
 
\t var triggerTop = $('#trigger').offset().top; 
 
\t var windowHeight = $(window).height(); // Use document.body.clientHeight for native (non-iFrame) page 
 
\t if (triggerTop < windowHeight) { 
 
\t \t triggerPosition = windowHeight - triggerTop + $('#triggerShow').height(); 
 
\t } else { 
 
\t \t triggerPosition = triggerTop - windowHeight + $('#triggerShow').height(); 
 
\t } 
 
    $('body').animate({ 
 
     scrollTop: triggerPosition 
 
    }, 500); 
 
    }); 
 
})(window.jQuery, window, document);

#filler { height: 1000px; cursor: pointer; } 
 
#triggerShow { transition: opacity .3s; opacity: 1; } 
 
#triggerShow.hidden { opacity: 0; } 
 
#trigger { padding-bottom: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="filler">Filler</div> 
 
<div id="triggerShow" class="hidden">to StackOverflow</div> 
 
<div id="trigger">Welcome</div>