Question

在那里我试图在从浏览器页面顶部向下滚动时显示隐藏的div，比如Accordion功能。我在这里使用的是本规范：

HTML:-
// Visible DIV
<div class="firstBlock">
    <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
 // Hiddden DIV
<div class="textBlock">
    <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
    <p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>

CSS:-

.textBlock {
  text-align: center;
  height: 104px;
  width: 100%;
  float: left;
  display: none;
}
.textBlock p {
  font-size: 16px;
  font-family: arial,helvetica,sans-serif;
  padding: 10% 5%;
  line-height: 20px;
}

jQuery:-
$(document).ready(function(){
  $(window).bind("scroll", function() {
    if ($(this).scrollTop() > 600) {
        $(".textBlock").fadeIn();
    } else {
        $(".textBlock").stop().fadeOut();
    }
  });
});

但需要进行一些修改才能像Accordion-Function一样工作。

Answer 1

如果你想要手风琴效果，你应该使用slideDown和slideUp函数（docs here），如下所示：

http://jsfiddle.net/b7yomjd0/3/

向下滚动后显示div内容

1 个答案: