Question

在开始之前，请参阅此链接，这是我的问题的第1部分：

Push content in container down on click, load content into space revealed Jquery

现在，这是我在实现前一个示例中的代码后的样子：

http://flexbeltsite.info/TestPages/SlideUpandDown.html

它很接近，但不是100％我想要的。当您第二次单击该按钮时，我希望动画以相反的速度完全反向播放...将容器重新放回顶部，并隐藏顶部内容。目前，使用的代码是在第二次按下按钮时使整个页面完全消失。我不希望这样。

-Bonus -

我还希望，如果可能的话，在第一次按下按钮向下滑动时，将标题锁定在最小高度的页面底部。当窗口缩小时，标题只能变得如此之高，但如果窗口完全展开，则标题将锁定在页面底部。简而言之，当您第一次按下按钮时，您基本上会看到页眉成为页脚。

不仅如此，我还想删除向下滚动页面的功能，以便您可以看到滑动的容器内容。按下滑动按钮后，一旦容器掉落，就不应该有滚动条。

- 最终奖金 -

我想在容器向下滑动并且顶部内容完全显示后，自动将另一个页面自动加载到topContent div中。

我希望我能得到帮助。如果提供答案的程序员可以提供联系信息，以防我需要跟进您的回复，那也很棒

Answer 1

我修改了你问题第一部分的Jquery代码：

<script> 
    $(function() {
        $("#MyProfile_Button").click(toggleTopContent);
    });

    function toggleTopContent() {
      var topContent = $("#topContent");
      var bottomContent = $("#Container");

      if(!topContent.is(":hidden")) {
        topContent.slideUp("slow");
      } else {
        // if you want the content to come from AJAX or so do it here
        //       ....
        //   If you do so, the topContent div should remain there, but empty.

        $("#topContent").slideDown("slow");
        //$("#Container").slideUp("slow");
      }
    }
</script>

看到它的动作 - 你可以在这里看到小提琴：http://jsfiddle.net/2bTSr/

奖金问题1

听起来您需要将#topContent的高度设置为$(window).height - $(#header).height，这会将您的标题推到正确的位置。这与overflow : hidden上的body相结合将禁用滚动条。

我很快就会有一个小提琴。

修改

这是一个显示上述想法的小提琴：http://jsfiddle.net/L9sSv/ - 我不是在操纵你的CSS或其他代码，主要是Jquery。希望这开始指向正确的方向。

对于第二个红利问题，您希望在.load()（或可能作为回调函数）之后使用Jquery的slidedown，您可以阅读here - 我“我相信你可以得到余下的！ ;）

修改

看看这个小提琴...... http://jsfiddle.net/wgYMQ/

基本上，我从正文标记样式表中取出overflow : hidden，并将$("body").css({overflow : "hidden"});放在function toggleTopContent()的{{1}}语句中，else放在{$("body").css({overflow : "auto"});中1}}。这会修复你的滚动条。

要让if卡在底部，我会说在header内也应用一些固定/绝对定位。

单击时将容器中的内容向下推，将内容加载到空间中显示Jquery - 第2部分

1 个答案: