javascript - 为什么我的 jQuery 调整大小触发不一致？

Question

我要完成一个网站，其中包含一些必须在不同屏幕上按比例缩放的元素(图像/文本/对 Angular 线)。

因为有一些文本需要调整大小，所以我使用 jQuery 来根据比率计算所有元素的尺寸。这是我当时能想到的最好的解决方案，随着最后期限的临近，我想我坚持了下来。这是一个按页面滚动的单页网站(例如，视口(viewport)中的整页)。

Here's a link to the demo site

代码背后的想法:

• 我们检查视口(viewport)的高度以设置容器大小<​​/li>
• 根据容器大小和必要设置包装器元素高度边距
• 根据比例设置宽度
• 使用这些值来计算字体大小、图像大小和偏移量

随着屏幕大小的调整，元素会按比例缩小以填充可用空间。

看起来像这样:

有两个这样的面板。我为第二个面板重复使用相同的代码(具有不同的变量名称和一些大小差异)。

这是我的第一个 Javascript/jQuery:

        // Set panel height on page load & resize   
          $(window).on("resize", function () {  
            var $panelHeight = $(window).height();
            var $headerHeight = $('.banner').height();

        // General height for panels
            $('.bg-panel').css('height', $panelHeight );
            $('.bg-panel').css('padding-top', $headerHeight);

        }).resize();

        // We want to scale content proportionately
        // First let's get some breakpoints
           var $breakPoint = 768;
           var $breakPointSM = 480;

        // Panel 1
            $(window).on("resize", function () {

        // Check height of current panel

        // If on single-column view, we want to measure the space between the text column and bottom of screen
        // Otherwise, height of entire panel

        var $windowHeight = $('.panel-test').height();  

        // But we need to subtract the header height, so our math is correct 
        var $headerHeight = $('.banner').height();
        var $windowHeight = $windowHeight - $headerHeight;

        // Now we have the correct height to work with

        // We're at 768px or below, subtract the text element from the overall height
        if ( $(document).width() <= $breakPoint) {
            var $heightofDiv = $('.panel-1-text').height();
            var $mobileHeight = $windowHeight - $heightofDiv;
            var $windowHeight = $mobileHeight;
        }

        // Save the window height for calculating our margins!
        var $windowHeightforMargins = $windowHeight;

        // Top and bottom margins
        var $marginTop = $windowHeight * (102/792); // ratio from PSD
        var $marginBottom = $windowHeight * (84/792); // ratio from PSD
        var $marginTotal = $marginTop + $marginBottom;


        // Responsive solution
        // As browser shrinks, reduce the height of panel so it produces a smaller container
        if ( $(document).width() > 1200 && $(document).width() <= 1440) {
            var $windowHeight = $windowHeight * 0.9;
            var $marginTop = $marginTop * 2;
        } 
        else if ( $(document).width() > 990 && $(document).width() <= 1200) {
            var $windowHeight = $windowHeight * 0.8;
            var $marginTop = $marginTop * 3;
        } 
        else if ( $(document).width() > $breakPoint && $(document).width() <= 990) {
            var $windowHeight = $windowHeight * 0.7;
            var $marginTop = $marginTop * 3.5;
        } 
        else if ( $(document).width() < $breakPoint) { // Ratio here goes up again because we're accounting for new height with $mobileHeight
            var $windowHeight = $windowHeight * 0.8;
        } 

        // This ratio determines the width of the container
        var $ratio = 697 / 607; // from PSD

        // Set container height, depending on height of panel 
        if ( $(document).width() <= $breakPointSM) { 
            var $taglinesHeight = ($windowHeight * 1.5); // Scale up for phones
        } 
        else if ( $(document).width() > $breakPointSM && $(document).width() <= $breakPoint ){
            var $taglinesHeight = ($windowHeight * 1); // Scale down for tablet
        }  
        else {
            var $taglinesHeight = $windowHeight - $marginTotal;
        }

        // Set container width as ratio of height
        if ( $(document).width() <= $breakPoint) { 
            var $taglinesWidth = $taglinesHeight * $ratio
        } else {
            var $taglinesWidth = $taglinesHeight * $ratio
        }

        $('.panel-test .bg-taglines').css("width", $taglinesWidth);
        $('.panel-test .bg-taglines').css("height", $taglinesHeight);

        // Add top margin if above breakpoint
        if ( $(document).width() > $breakPoint) { // No margin unless above 768px
            $('.panel-test .bg-taglines').css("margin-top", $marginTop);
        } 
        else {
            $('.panel-test .panel-1-tagline').css("bottom", $marginTop);
        }

        // Set font size
        var $fontSize = $taglinesWidth * 0.12;
        $('.bg-panel h4').css("font-size", $fontSize);

        // Set pink line origin (relative to bottom-left of frame)
        var $pinkX = $taglinesWidth * (286 / 705);
        var $pinkY = $taglinesHeight * (192 / 607);
        $('.panel-test .animation-wrapper').css("left", $pinkX);
        $('.panel-test .animation-wrapper').css("bottom", $pinkY);

        // Set image size 
        var $imageWidth = $taglinesWidth * 0.556;
          $('.panel-test .scaleable-image').css("width", $imageWidth);

        // Set h3 margin from top
        if ( $(document).width() >= $breakPoint) { 
            var $marginH3 = $windowHeight * (217/792); // ratio from PSD
            $('.panel-test h3').css("margin-top", $marginH3);
        } else { 
            // CSS
        }   

        // Set line offset from top
        var $lineOffset = $taglinesHeight * 0.7;
            $('.panel-test .line-wrapper').css("top", $lineOffset);

        // Set line length
        var $lineLong = $taglinesWidth * 1;
            $('.panel-test .pink-line').css("width", $lineLong);

}).resize();

它有效:大多数时间。

如果我拖动我的窗口来调整大小，一些元素会被调整大小。其他人没有。

页面刷新通常可以解决问题，但现在，元素(主要是图像!)无法正确缩放并与其他元素同步。

我是 jQuery 的新手，这是我的第一个大元素。也是使用 resize 的新手。希望我只是犯了一个容易修复的错误。

谢谢!

LIVE SITE LINK

正在使用的其他插件:jQuery Scrollify (用于整页滚动)和 ScrollReveal .

Answer 1

我想我可以回答我自己的问题。

问题似乎是当从一个全屏面板滚动到另一个时，这些值会混淆。

改变这个:

$(window).on("调整大小", function () {

对此:

$(window).on("调整加载滚动条", function (e) {

...解决了这个问题。我不确定这样做是否正确，但调整大小现在一切正常。