JavaScript: 根据媒体查询设置滚动位置变量

Question

我正在 fade-in/out-effect-on-scroll 进行网络项目。在我的 js 上，我必须为滚动位置 i 设置一个特定的值。 e.使效果生效的偏移量。

问题：

偏移值不能应用于所有类型的设备，因为不同的高度。

问题（分层）：

如何使设备的静态值动态变化 height/media 查询?
一般怎么瘦代码？
如何触发额外的 slide-slightly-from-right/left 效果?

代码如下：

    // ---### FOUNDATION FRAMEWORK ###---
$(document).foundation() 

// ---### FADE FX ###---  

// ## SECTION-01: fade out on scroll ##  
$(window).scroll(function(){  
    // fade out content a  
    $(".j-fadeOut").css("opacity", 1 - $(window).scrollTop() / 470);// 470 should be variable  

    // ## SECTION-02: fade in/out on scroll bottom ##  
    var offset = $('.j-fadeOut-2').offset().top;  
    console.log('offset: '+offset);  
    console.log('window: '+$(window).scrollTop())
    if($(window).scrollTop() > offset)  
    {  
      // fade out top part of content b  
        $(".j-fadeOut-2").css("opacity", 1-($(window).scrollTop() - offset)/520);// 520 should be variable

      // fade in bottom part of content c
      $(".j-fadeIn").css("opacity", 0 + ($(window).scrollTop() - offset)/ 1100);// 1100 should be variable
    }
  });

Answer 1

See here for JavaScript Media Queries

您可以使用 window.matchMedia 在 JavaScript 中执行媒体查询。示例：

var mediaQuery = window.matchMedia( "(min-width: 800px)" );

结果将作为布尔值存储在 mediaQuery.matches 中，即

if (mediaQuery.matches) {
  // window width is at least 800px
} else {
  // window width is less than 800px
}

您可以使用其中的多个来适应您不同的设备宽度。使用标准 Bootstrap 桶：

var sizes = ['1200px', '992px', '768px', '480px']; // standard Bootstrap breakpoints
var fadeOutAs = [470, 500, 530, 560]; // this corresponds to your content a fadeout variable. Modify as required per screen size
var fadeOutBs = [520, 530, 540, 550]; // content B fadeout
var fadeOutCs = [1100, 1200, 1300, 1400]; // content C fadeout

var fadeOutA = 0;
var fadeOutB = 0;
var fadeOutC = 0;

for (i = 0; i < sizes.length; i++) {
    var mediaQuery = window.matchMedia( "(min-width: " + sizes[i] + ")" );
    if (mediaQuery.matches) {
        fadeOutA = fadeOutAs[i];
        fadeOutB = fadeOutBs[i];
        fadeOutC = fadeOutCs[i];
    }
}

希望对您有所帮助

JavaScript: 根据媒体查询设置滚动位置变量

JavaScript: Set scroll position variable according to media queries

html

javascript

css

media-queries

responsive-design

See here for JavaScript Media Queries