Question

在http://www.mtjmedia.nl/Homepage/contact/我有一个简单的jquery代码，如果你正在滚动，它应该会让大的社交图标显示/淡入。
相反，当您仅滚动到页面底部时，会出现三个图标。

有人知道问题是什么吗？

var $win = $(window);
var $img = $('.fadeInScroll');
$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $img.each(function () {
        var $self = $(this);
        var prev = $self.offset();
        if (prev) {
            var pt = 0;
            pt = prev.top - $win.height();
            $self.css({
                opacity: (scrollTop - pt) / ($self.offset().top - pt)
            });
        } else {
            $self.css({
                opacity: 1
            });
        }
    });

}).scroll();

我正在使用此脚本：http://trulycode.com/bytes/simple-appear-on-scroll/

Answer 1

将代码移到加载函数$(function() { });中，如下所示。似乎问题是在页面完全加载之前调用var $win = $(window);引起的

<script type='text/javascript'>
    $(function() {
    var $win = $(window);
    var $img = $('.fadeInScroll');
    $win.on('scroll', function() {
        var scrollTop = $win.scrollTop();

        $img.each(function() {
            var $self = $(this);
            var prev = $self.offset();
            if (prev) {
                var pt = 0;
                pt = prev.top - $win.height();
                $self.css({
                    opacity: (scrollTop - pt) / ($self.offset().top - pt)
                });
            } else {
                $self.css({
                    opacity: 1
                });
            }
        });

    }).scroll();

});
</script>

Answer 2

通过将window对象更改为document对象并从事件附件的末尾删除.scroll()，代码似乎工作正常。

看看这个复制场景的jsfiddle，只需在预览面板中向下滚动即可看到结果：

http://jsfiddle.net/7kjj9z1c/2/

希望有所帮助！

Answer 3

尝试删除方法末尾的.scroll（），如此示例。

$( window ).scroll(function() {
  console.log('Action here');
});

这是一个功能齐全的例子。希望这有帮助。

 <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(window).scroll(function() {
            $('#number').html(parseInt($('#number').html())+1);
        });
    </script>
<style>
    body{
         height: 3000px;
    }

    span{
        display:inline-block;
        position:relative;
    }

    div.column{
        position:relative;
        height:2500px;
        width:30px;
        display:inline-block;
         background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(red, blue); /* Standard syntax */
    }

    #number{
        font-size:340px;
        position:fixed;
        left:100px;
        height: 40%;
        width:40%;
        display: inline-block;

    }

</style>
</head>
<body>
    <span>dO SCROLL:</span><br>
    <div class="column"></div>
    <div id="number">0</div>



</body>

您滚动的每个像素都会触发事件，并会增加计数器。

底部有Jquery滚动事件触发器

3 个答案: