Question

我正在尝试的效果与看到的效果非常相似 https://codepen.io/michaeldoyle/pen/Bhsif?editors=0010 问题在于，出于某种原因，它根本不起作用网站http://pmoore17.altervista.org/TWADrama/index.php 我试图在内容阶段逐步淘汰幻灯片 in，反之亦然。帮助

我的JQuery：

    var hidetop = $("#hidetop");
    var range = $("#hidetop").height();
    var body = $("#wrapper");

    $(window).on('scroll', function() {

      var scrollTop = $(this).scrollTop();
      var offset = hidetop.offset().top;
      var height = hidetop.outerHeight();
      offset = offset + height / 2;
      var calc = 1 - (scrollTop - offset + range) / range;

      hidetop.css({
        'opacity': calc
      });

      if (calc > '1') {
        hidetop.css({
          'opacity': 1
        });
      } else if (calc < '0') {
        hidetop.css({
          'opacity': 0
        });
      }

    });

我的JQuery目前已从我的网站上删除，因为它只是增加加载时间并导致图像无法加载。

Answer 1

好的，我明白了。

在offset = offset + height / 2;中删除2除法。

所以这样：offset = offset + height;

另外，请用较长的页面进行测试或者 - 只是为了测试 - 添加：

$（＆＃34;＃包装＆＃34）的CSS（{＆＃34;高度＆＃34;：2000}）;

Answer 2

您是否在head元素中使用了<script> your function </script>？如果是，这可能是问题..在关闭</body>标记之前，将Android放在文档的末尾。

我无法让JQuery Scroll Function在我的网站上运行

2 个答案: