0

这就是我要为我的网站做的事情（还没有上线，或者我会发布链接）：我希望在页面首次加载时隐藏 div（scrolltop() ==0）并在何时上滑或滑动切换用户向下滚动。到目前为止，这有效。但我也希望页面本身滚动到顶部，并让 div 在单击后立即向下滑动。问题：一旦它消失，并且页面向上滚动，就会触发初始的 if-else 并且 div 会向上和向下滑动额外的时间。我该如何解决它，以便它在用户单击后保持隐藏状态，但在他/她决定再次向下滚动时重新出现？作为一个方面：页脚也是一个粘性页脚（我不知道这是否有必要，但它保留在页面底部）。这是我的代码：

$(function(){
    if($("#footer").length>0)
    $("#footer").hide();});

$(window).scroll(function() {
    if ($(this).scrollTop() == 0) {
    $("#footer:visible").slideToggle('fast',"swing",function(){});
    }
else {
    $("#footer:hidden").slideToggle('fast',"swing",function(){});
}});


$(document).ready(function(){
$('a.fill-div').click(function(){
    $('#footer').slideToggle('fast',"swing",function(){});
    $('html, body').animate({scrollTop:0}, 'slow');
    $("#footer").die('slideToggle');
    return false;
});
});

我只编写了几个月的代码，因此将不胜感激。无法获取jsFiddle正常工作以进行演示，但这将有助于说明定位。

编辑：我发现我上面的 slideToggle() 代码不能很好地与 Masonry 配合使用，因为当在脚本标签中为 IE7 浏览器错误消息处理添加新的 jQuery 功能时，会抵消 Masonry，并且上面的 slideToggle() 代码按预期工作。但是，Harsh 在接受的答案中发布的链接适用于 Masonry，并以正确的方式解决了我的问题，pr0-m0de。

4

1 回答 1

0

我已尝试检查并解决我理解的问题，请在此处查看现场演示

我在您的版本中所做的更改：

  1. 更改slideToggle为slideUp和slideDown在window scroll事件中分别隐藏和显示。

代码如下图

HTML

<div id="container">
    <a href="#test" class="fill-div">
        Testing Anchor
    </a>
    <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <a href="#test" class="fill-div">
        Testing Anchor
    </a>
</div>
<div id="footer">
    Footer content Footer content Footer content Footer content Footer content Footer content
</div>

JavaScript

$(function() {
    if($("#footer").length>0)
    $("#footer").hide();
});

$(window).scroll(function() {
    if ($(this).scrollTop() == 0) {
      $("#footer:visible").slideUp('fast',function(){});
    }
    else {
      $("#footer:hidden").slideDown('fast',function(){});
}});


$(document).ready(function(){
 $('a.fill-div').click(function(){
    $('#footer').slideToggle('fast',function(){});
    $('html, body').animate({scrollTop:0}, 'slow');
    $("#footer").die('slideToggle');
    return false;
 });
});

我希望它对你有用。

更新

在查看了您的jsfildle 示例后，我可以理解您想要 scrollToTop 类型的 jquery 实现，它已经由许多人开发，您可以在这里和这里查看一个。并按原样使用插件，或者以这些作为参考来修改您的实现。:D

于 2013-04-18T12:32:40.823 回答