Question

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

if（scrollVl）＆lt;这个更改滚动到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

请检查以下代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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代替本地页面。

＆＃13;

(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;
	var triggerTop = $('#trigger').offset().top;
	var windowHeight = $(window).height(); // Use document.body.clientHeight for native (non-iFrame) page
	if (triggerTop < windowHeight) {
		triggerPosition = windowHeight - triggerTop + $('#triggerShow').height();
	} else {
		triggerPosition = triggerTop - windowHeight + $('#triggerShow').height();
	}
    $('body').animate({
      scrollTop: triggerPosition
    }, 500);
  });
})(window.jQuery, window, document);

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: