如何实现这两个航点 - 无限直播滚动和粘贴标题?

时间:2012-03-11 03:46:26

标签: javascript html sticky-footer sticky

我使用2个航点来实施

1. a sticky header (http://imakewebthings.com/jquery-waypoints/sticky-elements/)
2. An infinite live scroll (http://imakewebthings.com/jquery-waypoints/infinite-scroll/)

标题有效。但是一旦触发了实时滚动,粘性标题就会返回到它的原始位置,并且底部的“顶部”按钮也会消失。实时滚动继续工作。

我尝试在实时滚动开始时再次调用stickyHeader函数。但这没有用。 我的stickyHeader函数如下,

var stickyHeader = function() {

  $('.top').addClass('hidden');
  $('body').waypoint(function(event, direction) {
      $('.top').toggleClass('hidden', direction === "up");
  }, {
      offset: '-100%'
  }).find('#stickyHeaderText').waypoint(function(event, direction) {
      $(this).parent().toggleClass('sticky', direction === "down");
      event.stopPropagation();
  });

};

更新     无限滚动

        var opts = {
            offset: '100%'
        };

        var $footer = $('#footerDivId');
        $footer.waypoint(function(event, direction) {
            $footer.waypoint('remove');
            ftr.remove();
                    // get more data
            $footer.waypoint(opts);
        }, opts);

        stickyHeader();

0 个答案:

没有答案