我目前拥有什么

具有Parallax-Effect的部分具有多个数据属性：

<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
检查window.on（'scroll resize load'）
通过enquire.js（匹配）
设置替代/默认行为（不匹配）
使用enquire.js的监听器。

到目前为止，这是代码：（Parallax脚本是：由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));但我无法弄清楚如何实现这一点，所以一切都融合在一起。

问题

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

我知道我的代码很乱，你现在可以告诉我，我是一个菜鸟。然而，我渴望学习并期待你的回复。非常感谢！

Answer 1

您可以使用yepnope动态加载JavaScript，然后使用window.innerWidth检查屏幕宽度。除非您使用浏览器用户代理字符串，否则我不确定是否专门检查移动设备。

有条件地加载具有一定宽度的台式PC（非触摸设备）的JS脚本

我目前拥有什么

JAVASCRIPT

我想要实现但无法弄清楚

问题

1 个答案: