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

I have a webpage that fires some events (specifically, fading in/out some elements) when user scrolls X pixels.

当用户滚动X像素时,我有一个网页可以触发某些事件(特别是淡入/淡出某些元素)。

Everything works fine on 1920x1080p resolution or like landscape resolutions (fine on iPhone 5 landscape for exampe). The problem is with larger resolutions or vertical res because content is already available without scrolling so the events are not fired.

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

How can I have a consistent behavior with all resolutions? Is there a way that allows me not to use media queries?

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

Here's a video of the events firing at 1920x1080p when scrolling: https://www.youtube.com/watch?v=Mtuy1E5JPew

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

And here's the link of the webpage.

这是网页的链接。

Here's one example of the script to fade in/out an element based on how much the user scrolled:

这是根据用户滚动的数量淡入/淡出元素的脚本的一个示例:

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

1 个解决方案

#1

Just trigger the scroll handler at the beginning. (right after binding the scroll handler)

只需在开头触发滚动处理程序。 (在绑定滚动处理程序之后)

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

Update, on second thought, since you test the scroll position and not where the element you want is, this will not work.

第二个想法更新,因为你测试滚动位置而不是你想要的元素的位置,这是行不通的。

Try checking if you reached the bottom

尝试检查是否到达底部

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() {
        });
   }
}

(but you will have to manually make sure the elements align, as i see that you want to position it at a specific place)

(但你必须手动确保元素对齐,因为我看到你想把它放在特定的地方)

#1