Прокрутите до div, скройте/покажите div, используя jQuery

Question

Можно ли прокручивать до div и показывать/скрывать его с помощью jQuery?

если (прокруткаVl) < это изменение прокрутите до 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>