滚动到div，使用jQuery隐藏/显示div

Question

是否可以滚动到div并使用jQuery显示/隐藏它？

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>