Question

我在HTML中的特定div中有一个回到顶部的按钮，这是一个滑出式面板。

<div class='back-to-top' id='back-to-top' title='Back to top'><i class='fa fa-chevron-up' /></div>

该回到顶部按钮的功能：

(function() {
$(document).ready(function() {
return $(window).scroll(function() {
  return $(window).scrollTop() > 200 ? $("#back-to-top").addClass("show") : $("#back-to-top").removeClass("show")
}), $("#back-to-top").click(function() {
  return $(".slide-out-panel").animate({
    scrollTop: "0"
  })
})
})
}).call(this);

问题在于，当面板关闭时，当我首先滚动主体（首页）时，按钮出现，当我打开面板并滚动背对顶按钮时，按钮不显示。

我不确定如何定位特定的div（滑出面板），当我打开它并滚动它时会显示回到顶部的按钮。我认为， $（文档）或返回$（窗口）有问题吗？

FIDDLE：http://jsfiddle.net/kq1nx8ew/

Answer 1

$(window).scroll(function() {将事件处理程序绑定到html, body上的“滚动”事件。如果要检测面板上的滚动事件，则需要在滚动功能中定位面板。像这样改变你的JS：

jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').addClass('is-visible');
    });
    //clode the lateral panel
    $('.cd-panel').on('click', function(event){
        if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel').removeClass('is-visible');
            event.preventDefault();
        }
    });

  $('.cd-panel-content').scroll(function() {
    if($('.cd-panel-content').scrollTop() > 200) {
      $("#back-to-top").addClass("show");
    }
    else {
      $("#back-to-top").removeClass("show");
    }
  });

  $("#back-to-top").click(function() {
    $('.cd-panel-content').animate({scrollTop: "0"});
  });

});

使用jQuery定位特定div

1 个答案: