gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 05:47:08 24 4
gpt4 key购买 nike

我正在为 Web 元素制作滚动时的淡入/淡出效果。在我的 js 上,我必须为滚动位置 i 设置一个特定的值。 e.使效果开始的偏移量。

问题:

  • 由于以下原因,偏移值无法应用于所有类型的设备不同的高度。

问题(分层):

  1. 如何使设备的静态值动态变化高度/媒体查询?
  2. 通常如何精简代码?
  3. 我怎样才能触发额外的从右/左稍微滑动到效果?

代码如下:

    // ---### 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
}
});

最佳答案

See here for JavaScript Media Queries

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

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

结果将作为 bool 值存储在 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:根据媒体查询设置滚动位置变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37540975/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com