Question

当用户滚动X像素时，我有一个触发某些事件的网页（特别是淡入/淡出某些元素）。

一切都可以在1920x1080p分辨率下工作，或者像风景分辨率一样（例如iPhone 5上的风景很好）。问题在于更高的分辨率或垂直分辨率，因为内容已经可用而无需滚动，因此不会触发事件。

如何在所有分辨率下保持一致的行为？有没有办法让我不使用媒体查询？

以下是滚动时以1920x1080p触发事件的视频： https://www.youtube.com/watch?v=Mtuy1E5JPew

这是网页的 link 。

以下是根据用户滚动的数量淡入/淡出元素的脚本示例：

var $window = $(window);
var $logopiano = $('#logopiano');

function showHideLogo() {
   if( $window.scrollTop() > 910 ) {
        $logopiano.fadeIn("slow", function() {
        });
   } else {
        $logopiano.fadeOut("slow", function() {
        });
   }
}

showHideLogo();
$window.scroll(showHideLogo);

Answer 1

只需在开头触发滚动处理程序。（在绑定滚动处理程序后立即）

$window.scroll(showHideLogo).trigger('scroll');

更新，第二个想法，因为你测试滚动位置而不是你想要的元素，这将不起作用。

尝试检查您是否到达底部

function showHideLogo() {
   var availableScroll = $(document).height() - $window.height(),
       scrollTop = $window.scrollTop();

   if( scrollTop > 910 || scrollTop  == availableScroll) {
        $logopiano.fadeIn("slow", function() {
        });
   } else {
        $logopiano.fadeOut("slow", function() {
        });
   }
}

（但你必须手动确保元素对齐，因为我看到你想把它放在一个特定的地方）

滚动事件：不同分辨率上的相同行为

1 个答案: