web-dev-qa-db-ja.com

スクロールでDivを表示/非表示

スライドショーの下部にあるdivがあり、ユーザーがスクロールするか下矢印を使用したときに消え、上にスクロールすると再び表示されるようにします。私はこれがjqueryスクロール機能を組み込んでいると推測していますか？

jqueryscrollshow-hide
9
Dan
<div>
  <div class="a">
    A
  </div>
</div>​


$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.a').fadeOut();
  } else {
    $('.a').fadeIn();
  }
});

サンプル （

57
Priyank Patel
$(window).scroll(function () {
  var Bottom = $(window).height() + $(window).scrollTop() >= $(document).height();
if(Bottom )
{
$('#div').hide();
}
});
2
Arun Killu

あなたがそれをアニメーション化し、数秒後にフェードアウトを開始したい場合の私の答えは次のとおりです。不透明度を使用したのは、まず最初に完全にフェードアウトしたくなかったからです。2番目に、多くのスクロールを行っても元に戻らず強制しません。

$(window).scroll(function () {
    var elem = $('div');
    setTimeout(function() {
        elem.css({"opacity":"0.2","transition":"2s"});
    },4000);            
    elem.css({"opacity":"1","transition":"1s"});    
});
1
DragonKnight

このコードを試してください

$('window').scrollDown(function(){$(#div).hide()});

$('window').scrollUp(function(){ $(#div).show() });
1
Madhavi Mangapati
$.fn.scrollEnd = function(callback, timeout) {          
  $(this).scroll(function(){
    var $this = $(this);
    if ($this.data('scrollTimeout')) {
      clearTimeout($this.data('scrollTimeout'));
    }
    $this.data('scrollTimeout', setTimeout(callback,timeout));
  });
};

$(window).scroll(function(){
    $('.main').fadeOut();
});

$(window).scrollEnd(function(){
    $('.main').fadeIn();
}, 700);

それはトリックを行う必要があります！

0
Quatban Taco

私はこのコードを試してかなり答えがあります;）

<div id="DivID">
</div>

$("#DivID").scrollview({ direction: 'y' });
$("#DivID > .ui-scrollbar").addClass("ui-scrollbar-visible");
0
user1120073