jQuery Scroll的位置:固定的CSS [英] JQuery Scroll with position:fixed CSS

问题描述

我有以下脚本.

<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>

演示: http://jsfiddle.net/franciscop/b39M4/3/

以某种方式在滚动顶部到达share div之前出现share-active div.我不知道我要怎么做.

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

您能帮我找到问题所在吗?

解决方案

我相信您太快地获得了元素的偏移量.当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事件.

I have the following script.

<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/

Somehow the share-activediv is appearing before the scroll top reaches share div. I don't know what I am going wrong.

Also, anyway to animate the apperance of the share-active div so users are attracted to it.

Can you help me find where the problem is?

解决方案

I believe you are getting the offset of your element too quickly. When document.ready fires the image(s) probably hasn't fully loaded. So you can either give the images on your page specific height values so they take-up the required space before they actually load, or you can use the window.load event to get your offset.

The easiest fix would probably be changing:

$(function () { // document ready

to:

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

Here is a demo: http://jsfiddle.net/b39M4/4/

This has the side-effect that your code won't work until the whole page has loaded. So another method would be to update the contentTop variable whenever necessary. Once on document.ready, once on window.load and maybe once each time an image loads. This would make it so the code would initialize faster and more accurately reflect the reality of the webpage's layout.

To animate the appearance of the element you can give it an initial opacity of zero and then after adding the element to the DOM, selecting it and animating it into visibility.

Also, you really should throttle the window.scroll event handler because some browsers will just lockup since there are so many window.scroll events that fire when using the scroll bar.

这篇关于jQuery Scroll的位置:固定的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！