1

在我的网站上，我使用 JS 进行视差滚动。我想有条件地仅在 >= 1025 px 宽度的台式机上加载该 JS。我迫切需要优化和整合方面的帮助。

我目前拥有的

具有视差效果的部分有几个数据属性：

<section id="profile" class="slide" data-speed="2" data-offsetY="185" data-type="background">

这些部分还具有通过 css 设置的背景图像。

.slide { 
padding:0;
width:100%; 
position:relative; 
margin:0 auto; 
overflow:hidden;
}
#profile { 
background: url(../assets/backgrounds/02_profile_back.jpg) 50% 185px no-repeat fixed, #0f0f11;
height:1027px;
}

JAVASCRIPT

到目前为止我得到了什么：

  • 在 $(document).ready 上执行的自定义函数 (myFunction)
  • 检查 window.on('scroll resize load')
  • 通过 enquire.js 执行 JS @breakpoint of 1025 px（匹配）
  • 设置替代/默认行为（不匹配）
  • 使用 enquire.js 的监听器。

到目前为止的代码如下：（视差脚本是：Richard Shepherd 编写，Ryan Boudreaux 修改）

function myFunction(){

// Cache the Window object
$window = $(window);

// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {  
    $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
    $(this).data('Xposition', $(this).attr('data-Xposition'));
    $(this).data('speed', $(this).attr('data-speed'));
});

// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){

    // Store some variables based on where we are
    var $self = $(this),
        offsetCoords = $self.offset(),
        topOffset = offsetCoords.top;



// This is the part I'm having trouble with //
// When the window is scrolled, resized, loaded...
    $(window).on('scroll resize load',function(e){

        // Check if Screen-width is higher or equal to 1025px
        enquire.register('screen and (min-width:1025px)', {

            match : function() {

            // If this section is in view
            if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
            ( (topOffset + $self.height()) > $window.scrollTop() ) ) {
            // Scroll the background at var speed
            // the yPos is a negative value because we're scrolling it UP!                              
            var yPos = -($window.scrollTop() / $self.data('speed')); 
            // If this element has a Y offset then add it on
            if ($self.data('offsetY')) {
                yPos += $self.data('offsetY');
            }
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';
            // Move the background
            $self.css({ backgroundPosition: coords });
                }; // in view
        },

        unmatch : function() {
            $('#profile').css('background-position', '50% 0px');
        }

    }).listen(); // Check Screen Width

    }); // window load resize scroll

}); // each data-type
} // myFunction

我想实现但无法弄清楚

我正在寻找一种方法来挤入另一个 if 循环，如果设备不是触摸设备，它只会执行第一个“匹配”部分。我找到var isTouch = (('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator));了，但我无法弄清楚如何实现这一点，所以一切都融合在一起。

问题

  1. 有没有办法实现“如果桌面PC具有1025px和更高宽度”的条件？
  2. 是否有在移动优先结束时有条件地加载视差 JS 的最佳实践/通用解决方案？

我知道我的代码一团糟，你现在可能知道我是个菜鸟。尽管如此，我渴望学习并期待您的回复。非常感谢！

4

1 回答 1

0

Well you could use yepnope to load your JavaScript dynamically, and then use window.innerWidth to check the screen width. I'm not sure on checking specifically for a mobile device, unless you use browser user agent strings.

于 2013-04-09T17:46:01.847 回答