1

我正在使用stickyfloat.js 将 .bottom_content div 保留在页面底部，因此当浏览器窗口很小时它不会覆盖基本元素。但是，我想向蓝色 div 添加一个切换按钮（其中显示“重要文本转到此处”，它将 div 发送到窗口底部，将页面元素保持在可见窗口区域下方，直到用户向下滚动足以揭示它们。期望的结果如下所示：之前和之后

切换按钮还应该取消绑定stickyfloat，以便它停止重新定位页面滚动上的.bottom_content，直到重新加载页面或再次单击切换按钮。

我得到的最远的是：

$('#minimize').toggle(function(){
    $cur_pos = $('.bottom_content').offset().top;
        $('.bottom_content').css({'top' : $cur_pos+147+'px'});
    }, function () {
    $('.bottom_content').css({ 'top' : 160+'px'});
});

但这是有问题的。我不是 jQuery 高手，所以我需要一些帮助。

我已经为那些想在中午喝咖啡时查看代码的人上传了一个工作版本和一个jsfiddle 。提前致谢。

4

1 回答 1

1

这个任务需要更多的努力，因为 stickyfloat 没有切换方法，你必须重新启动它。结果很简单：如果它是可见的，它会隐藏滑块，如果它是隐藏的，它会显示它。也许代码会更有帮助：

$('#minimize').click(function() {
  $bottom = $('.bottom_content');
  if ($bottom.hasClass('bottom_content_home')) {
    // remove stickyfloat
    $bottom.css('top', 'auto').stickyfloat('destroy');
  } else {
    // re-initiate stickyfloat (taken from your scripts)
    $bottom.stickyfloat({
      duration: 0,
      stickToBottom: true
    });
  }
  // hide slider
  $('.bc_slider').toggle();
  // this class controls css option 'padding-top'
  $bottom.toggleClass('bottom_content_home');
});

也许这至少在某种程度上是有用的。

于 2013-07-17T17:21:35.097 回答