JQuery Scroll with position：修复CSS

我有以下脚本。

 $(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('
SOCIAL BUTTONS
'); } else { $('.share-active').replaceWith('
'); } }); });  

演示 ： 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事件在使用滚动条时触发。