Question

我想让div保持滚动但在父div的末尾停在底部，这样可以正常工作。当窗口小于700px时，我希望删除粘性类，这样可以正常工作。我现在的问题是当窗口再次大于700时再次添加粘性类。如何切换这些类，以便在窗口变大时再次出现？

这是一个小提琴：https://jsfiddle.net/m6jfyh9L/2/

我正在使用这里的stickem.js库https://github.com/davist11/jQuery-Stickem/blob/master/jquery.stickem.js

代码：

 $(document).ready(function() {

   $('.container').stickem();

    var window = $(window).width();

     if (window<700) 
       $("div").removeClass("stickem");
       $("div").removeClass("stickem-container");
       $("div").removeClass("stickit");
       $("div").removeClass("stickit-end");

});

Answer 1

试试这个：

$(window).on('resize',function(){
     if($(this).width()>700)
        $('yourDiv').addClass('sticky');
     else
        $('yourDiv').removeClass('sticky');
});

Answer 2

$(document).ready(function() {

  $(window).resize(function() {
    if(false == $('.selector').hasClass('sticky') && $(window).width() >= 700) {
      $('.selector').addClass('sticky');
    }

    if(true == $('.selector').hasClass('sticky') && $(window).width() < 700) {
      $('.selector').removeClass('sticky');
    }
  });
});

尚未测试过。只需确保您可以选择要添加的元素或删除粘性类。

调整窗口大小时如何设置toggleClass？

2 个答案: