1

我使用此代码在滚动页面时移动项目

$(document).scroll(function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    $("#profile").offset({top:scrollTop+34});
});

而这段代码来显示和隐藏它。

$(document).ready(function() {
    $(".various[type=profile]").click(function() {
        if($("#profile").attr("clicked") == "yes") {
            $("#profile").stop().animate({opacity: 0}, 1000);
            setTimeout(function(){$("#profile").css("visibility", "hidden")}, 1000);
            $("#profile").attr("clicked", "");
        }
        else {          
            $("#profile").css("visibility", "visible");
            $("#profile").stop().animate({opacity: 1}, 1000);
            $("#profile").attr("clicked", "yes");
        }
    });
});

这是CSS

#profile {
    position: absolute;
    top: 34px;
    right: 0;
    width: 200px;
    visibility: hidden;
    z-index: 1000;
    opacity: 0;
}

问题是，每次点击该项目都会返回到它的初始位置（顶部：34 像素，右侧：0 像素）。使用 fadeIn/fadeOut 我有同样的问题。

4

2 回答 2

0

我认为你应该看看 jQuery UI。他们的代码已经可以使标签可拖放。它们也很容易定义。

$("#profile").draggable();

http://jqueryui.com

于 2013-08-01T18:08:57.260 回答
0

您需要在这里做几件事。

1：不用jQuery定位元素，你可以用CSS属性position:fixed把它贴在直角上。

#profile {
    position: fixed;
    top: 34px;
    right: 0;
    width: 200px;
    z-index: 1000;
}

2：您的 jQuery 代码在显示和隐藏方面存在一些问题。首先，clicked不是有效的 HTML 属性。您应该考虑使用$(element).data('clicked')而不是$(element).attr('clicked')存储其可见性。接下来，当您设置 时visibility:hidden，该click事件不再在其上注册，因此单击它不会再次显示它。

也许这就是您正在寻找的效果？

于 2013-08-01T18:16:42.313 回答