Question

我有以下脚本。

<script type="text/javascript">
    $(function () { // document ready
        var contentTop = $('.share').offset().top; // returns number 
        $(window).scroll(function () { // scroll event             
            var wayPoint = $(window).scrollTop(); // returns number               
            if (contentTop < wayPoint) {
                var shareWidth = $('.content').width();
                $('.share-active').width(shareWidth);
                $('.share').replaceWith('<div class="share-active">SOCIAL BUTTONS</div>');
            } else {
                $('.share-active').replaceWith('<div class="share"></div>');
            }
        });
    });
</script>

DEMO ：http://jsfiddle.net/franciscop/b39M4/3/

不知何故，share-active div出现在滚动顶部到达share div之前。我不知道我错了什么。

，无论如何要设置share-active div的外观动画，以便吸引用户。

你能帮我找到问题所在吗？

Answer 1

我相信你的元素偏移太快了。当document.ready触发时，图像可能尚未完全加载。因此，您可以在页面上提供特定高度值的图像，以便在实际加载之前占用所需的空间，或者您可以使用window.load事件来获取偏移量。

最简单的解决方案可能会改变：

$(function () { // document ready

为：

$(window).on("load", function () { // window load

以下是演示：http://jsfiddle.net/b39M4/4/

这会产生副作用，即在整个页面加载之前，您的代码将无法运行。因此，另一种方法是在必要时更新contentTop变量。一旦在document.ready上，一旦在window.load上，可能每次加载图像一次。这样可以使代码更快地初始化并更准确地反映网页布局的实际情况。

要为元素的外观设置动画，您可以将其初始opacity设为零，然后在将元素添加到DOM后，选择它并将其设置为可见性。

另外，你真的应该限制window.scroll事件处理程序，因为有些浏览器只会锁定，因为在使用滚动条时有很多window.scroll个事件被触发。

JQuery Scroll with position：修复CSS

1 个答案: