2016-12-15 115 views
-1

是否可以滚动到div并使用jQuery显示/隐藏它?滚动到div,使用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"); 
 
    }; 
 
    }); 
 
});

+0

是你的问题,你可以这样做,或者你有一个问题,这样做 – Chiller

+0

我必须这样做,@@ – easonchiu

+0

你应该检查的jQuery的URL,如果它的正确 – Chiller

回答

0

请检查下面的代码:

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

0

这可能是你正在寻找:

$(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"); 
     }; 
    }); 
}); 
0

使用$.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>

+0

谢谢你的问题详细解释,我已经尝试过你的解决方案,但它不工作。 – easonchiu

+0

然后我只是复制所有的代码,它仍然没有工作,我用铬控制台调试,它显示 TypeError无法读取属性'顶部'undefined 我该如何解决这个问题? 谢谢! – easonchiu

+0

@easonchiu这可能是由于Chrome的原生'$'之间的冲突。我在函数调用中将'jQuery'更改为'window.jQuery'。还更新了您单击的部分以滚动到某个元素。 – josephting