Question

这就是我想为我的网站做的事情（还没有现场或者我会发布一个链接）：我希望在页面首次加载时隐藏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功能时，偏移了Mason，并且上面的slideToggle（）代码工作为意。但是，Harsh在接受的答案中发布的链接与砌体一起使用并以正确的方式解决了我的问题，pr0-m0de。

Answer 1

我尝试检查并解决了解我理解的问题，请查看live demo here

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

在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 example后，我可以理解您想要many已经开发的scrollToTop类型的jquery实现，您可以检查一个here和here。并按原样使用插件，或者可以修改您的实现，将这些作为参考。：d

.slidetoggle（）在.click（）事件之后经常切换一次

1 个答案:

更新